请看this WordPress 主题，如果您在 chrome 或 safari 中滚动页面，页面会闪烁。
请缩小浏览器的高度以便您可以滚动，我正在使用下面的代码将 narrow-header 类添加到我的 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 );
这是我正在使用的 CSS:
.narrow-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
最佳答案
这是因为当页面从顶部滚动超过 200px 时，js 代码添加了 .narrow-header 类，它具有 position: fixed; 。这改变了滚动顶部偏移量，它变得小于 200 。然后js代码再次添加类normal-header ...循环重复，页面出现闪烁。
为了克服这个问题，您需要为父元素设置一些最小高度，无论标题的位置如何，它都保持网页的高度和滚动位置。如果您的 header 直接位于正文下方，则需要将其包装在父元素中。
<body>
<header class="main-header">
<div class="header-wrap">
<nav>
.......header navigation.......
</nav>
</div>
</header>
</body>
CSS 方式 - 将标题元素的高度放到其父元素中。
.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());
希望这对您有所帮助。
关于jquery - 修复了 Firefox 和 Chrome 中的标题闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31140389/