Question

Please take a look at this WordPress theme, if you scroll the page in chrome or safari, the page flickers.

Please make the height of the browser smaller so that you can scroll, I am using the below code to add narrow-header class to my header-wrap.

( 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 );

And this is the CSS I am using:

.narrow-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

Answer 1

这是因为当页面从顶部滚动超过200px时，js代码会添加具有.narrow-header的类position: fixed;。这会更改滚动顶部偏移量，并且小于200。然后js代码再次添加类normal-header ...循环重复，页面似乎闪烁。

要解决此问题，您需要为父元素设置一些最小高度，无论页眉的位置如何，都会保持网页高度和滚动位置。如果您的标题直接位于正文下，则需要将其包装在父元素中。

<body>
    <header class="main-header">
       <div class="header-wrap">
          <nav>
               .......header navigation.......
          </nav>
       </div>
    </header>
</body>

CSS方式 - 将header元素的高度放在其父元素上。

.main-header { 最小高度：100px; / 假设您的标题高度为100px / }
JS Way

var header = $（＆＃34; .header-wrap＆＃34;）; header.parent（）。css（＆＃39; min-height＆＃39;，header.height（））;

希望这有帮助。

Fixed Header flickers in Firefox & Chrome

1 个答案:

Fixed Header flickers in Firefox &amp; Chrome

1 个答案:

Fixed Header flickers in Firefox & Chrome