我有这段代码可以在每次滚动窗口时添加固定的 header 类。问题是,当窗口加载 anchor 链接时,比方说,距离顶部 100px,它将以其原始外观加载标题,并且只会在窗口滚动后添加固定类。 我该如何解决这个问题?
$(window).on("load resize", function () {
var headerTop = $(".header").offset().top;
var headerHeight = $(".header").outerHeight();
$(window).on("scroll", function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > headerTop) {
$('.header').addClass("fixed");
} else {
$('.header').removeClass("fixed");
}
});
});
最佳答案
您正在使用 $(".header").offset().top;
来比较 if (scrollTop > headerTop)
条件,您应该与 if (scrollTop > headerHeight)
$(".header").outerHeight();
variable has actual height of header element.
请检查以下代码:
$(window).on("load resize", function () {
var headerTop = $(".header").offset().top;
var headerHeight = $(".header").outerHeight();
$(window).on("scroll", function () {
console.log('scroll...');
var scrollTop = $(window).scrollTop();
if (scrollTop > headerHeight) {
console.log('applied fiexed');
$('.header').addClass("fixed");
} else {
$('.header').removeClass("fixed");
console.log('removed fiexed');
}
});
});
.header{
border:solid 1px red;
height:50px;
width:501px;
background-color:#808080;
font-size:20px;
}
.fixed{
position:fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">This is header</div>
Something line 1<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Something line 2<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Something line 3<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Something line 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Something line 5
关于javascript - 窗口重新加载到同一位置后,固定标题不会保持固定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52049936/