【发布时间】：2021-09-23 08:22:23
【问题描述】：
我正在使用一个粘性标题，它会在您向上滚动时立即更改为 position:fixed。为了检测向上滚动，我将当前的 scrollTop 与旧的 scrolltop 进行比较——这工作得非常好！
现在我正在为我的页脚实现内容可见性，以节省页面加载时的一些渲染时间。
$(document).ready(function(){
var lastScrollTop = window.pageOffsetY || 0;
var isFixed = false;
$(window).on('scroll', _.throttle(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop > 200 && scrollTop < lastScrollTop && !isFixed){
console.log('stick header');
$('.header').addClass('header-fixed');
isFixed = true;
} else if((scrollTop > lastScrollTop && isFixed) || scrollTop == 0){
console.log('unstick header');
$('.header').removeClass('header-fixed');
isFixed = false;
}
lastScrollTop = scrollTop;
}, 500));
});.content {
height: 200vh;
background-color: grey;
}
.content-visibility {
content-visibility: auto;
}
.content-inner {
height: 100px;
background-color: green;
}
img.content-inner {
height: auto;
}
.content.content-visibility {
height: auto;
background-color: #ddd;
}
.footer {
background-color: #eee;
}
.header {
height: 200px;
background-color: white;
}
.header-fixed {
position: fixed;
top: 0;
width: 100vw;
left: 0;
z-index: 10;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<div class="container">
<div class="header">
header
</div>
<div class="content">
content 1
</div>
<div class="content-visibility">
<img loading="lazy" class="content-inner" src="https://via.placeholder.com/301x310">
<img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x303">
<img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x340">
<img loading="lazy" class="content-inner" src="https://via.placeholder.com/303x340">
<div style="height:200px"></div>
<img loading="lazy" class="content-inner" src="https://via.placeholder.com/304x340">
<img loading="lazy" class="content-inner" src="https://via.placeholder.com/305x340">
<img loading="lazy" class="content-inner" src="https://via.placeholder.com/306x340">
<img loading="lazy" class="content-inner" src="https://via.placeholder.com/307x340">
</div>
<div class="content">
content 2
</div>
<div class="footer content-visibility">
footer
<img loading="lazy" class="content-inner" src="https://via.placeholder.com/301x300">
<img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x300">
<img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x300">
<img loading="lazy" class="content-inner" src="https://via.placeholder.com/303x300">
<img loading="lazy" class="content-inner" src="https://via.placeholder.com/304x300">
<img loading="lazy" class="content-inner" src="https://via.placeholder.com/305x300">
<div style="height:200px"></div>
<img loading="lazy" class="content-inner" src="https://via.placeholder.com/306x300">
<img loading="lazy" class="content-inner" src="https://via.placeholder.com/307x300">
</div>
</div>如果你快速向下滚动，你会看到日志语句“stick header”，这是错误的，应该只在向上滚动时发生。 现在的问题是，在浏览器呈现内容可见性元素的那一刻，javascript 检测到向上滚动，因为文档高度发生了变化（我猜）。
有什么办法可以防止这种情况发生吗？
【问题讨论】：
标签： javascript css scroll