gpt4 book ai didi

jquery - 修复了 Firefox 和 Chrome 中的标题闪烁

转载 作者:太空宇宙 更新时间:2023-11-04 03:02:13 24 4
gpt4 key购买 nike

请看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>
  1. CSS 方式 -将标题元素的高度放到其父元素中。

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

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

希望这对您有所帮助。

关于jquery - 修复了 Firefox 和 Chrome 中的标题闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31140389/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com