如何检测某人何时滚动了一定数量？ [复制]

Question

这个问题在这里已经有了答案：

使用 Vanilla Javascript 检测滚动以帮助更改导航 CSS [重复] （3 个答案）

如何创建滚动后固定在顶部的粘性导航栏10 个答案

5 个月前关闭。

当页面滚动一定数量的像素时，我想更改顶部导航栏的外观。 我相信这意味着我需要一个监听器来监听那个滚动量？ 我阅读了有关element.scrollTop的信息，但这似乎并没有不断地“倾听”用户滚动了多少。

我怎样才能达到这个效果？

Answer 1

尝试这个：

window.addEvent('scroll',function(e) {
        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
                // enter code here
            }
});

Answer 2

使用以下代码。

 $(window).scroll(function() { document.getElementById("fixed_box").innerHTML = "You have Scrolled to " + $(window).scrollTop() + "px"; });

 #fixed_box { position:fixed; top:10px; overflow:auto; height: 100%; }

 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <div style="height: 5000px;"> </div> <div id="fixed_box">You have Scrolled to 0px</div>

Answer 3

window.addEventListener('scroll',handleScroll);

function handleScroll(){
      let scrollPosition = window.pageYOffset || window.scrollY || document.body.scrollTop || document.documentElement.scrollTop;

  if(scrollPosition >50)
      console.log('Viewport scrolled more than 50px')
  else
      console.log('Viewport scrolled less than 50px')

}

 let firstHandlerScroll = debounce(handleScroll, 200); window.addEventListener('scroll',firstHandlerScroll); function handleScroll(){ let scrollPosition = window.pageYOffset || window.scrollY || document.body.scrollTop || document.documentElement.scrollTop; if(scrollPosition >=50){ console.log('more than 50') } else console.log('less than 50') } function debounce(fn, delay) { let timer = null; return function () { clearTimeout(timer); timer = setTimeout(function () { fn(); }, delay); }; }

第一个 naif 版本还可以，但是很消耗资源。 滚动事件处理程序被调用很多次。 片段中的第二个版本仅在滚动后释放鼠标时才调用处理程序，因此对效率非常友好