Jquery 固定标题闪烁在Firefox&；铬_Jquery_Css_Twitter Bootstrap

Jquery 固定标题闪烁在Firefox&；铬

jquery css twitter-bootstrap

Jquery 固定标题闪烁在Firefox&；铬,jquery,css,twitter-bootstrap,Jquery,Css,Twitter Bootstrap,请看一下WordPress主题，如果你在chrome或safari中滚动页面，页面会闪烁请缩小浏览器的高度以便滚动，我正在使用下面的代码将窄标题类添加到我的标题环绕 ( function( $ ) { var header = $(".header-wrap"); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 200) {

请看一下WordPress主题，如果你在chrome或safari中滚动页面，页面会闪烁

请缩小浏览器的高度以便滚动，我正在使用下面的代码将

窄标题

类添加到我的

标题环绕

( function( $ ) {
  var header = $(".header-wrap");
  $(window).scroll(function() {
      var scroll = $(window).scrollTop();
      if (scroll >= 200) {
          header.removeClass('normal-header').addClass("narrow-header fadeIn animated");
      } else {
          header.removeClass("narrow-header fadeIn animated").addClass('normal-header');
      }
});

} )( jQuery );

这是我正在使用的CSS：

。窄标题{
位置：固定；
排名：0；
左：0；
宽度：100%；
z指数：999；
}

这是因为当页面从顶部滚动超过200px时，js代码添加了类

。窄头

，该类具有

位置：固定。这会更改滚动顶部偏移，使其小于200。然后js代码再次添加类normal头。。。循环重复，页面似乎在闪烁
为了克服这一问题，您需要为父元素设置一些最小高度，以保持网页的高度和滚动位置，而不管标题的位置如何。如果标题直接位于body下面，则需要将其包装在父元素中
<body>
    <header class="main-header">
       <div class="header-wrap">
          <nav>
               .......header navigation.......
          </nav>
       </div>
    </header>
</body>

.main-header {
    min-height : 100px ; /*assuming your header is have height of 100px*/
}


JS方式
var header = $(".header-wrap");
header.parent().css('min-height' , header.height());


希望这有帮助