仅在页面顶部滚动时显示标签答案

【问题标题】：Display tag only when page is scrolled at top仅在页面顶部滚动时显示标签
【发布时间】：2009-08-30 21:23:36
【问题描述】：

如何检测用户是否使用 jQuery 向下滚动？我想要一个固定的 div 仅在浏览器位于顶部 300 像素内时显示。当用户向下滚动超过 300px 标记时，它应该会消失。当用户滚动回顶部时，它应该隐藏。我该怎么做？

【问题讨论】：

放置距离页面顶部不超过 300px。你甚至不需要 jQuery :-)
我想把它固定在浏览器上，所以当你向下滚动时，它会看起来很酷：D

【解决方案1】：

var docElem = $(document.documentElement)
docElem.scroll(function(e) {
    if(docElem.scrollTop() < 300) {
        whatever.show();
    } else {
        whatever.hide();
    }
});

您可能必须在不同的浏览器中使用不同的元素（如 docElem），但这在 Firefox 中应该可以工作。（我没有测试过）

编辑：更多 jQuery

【讨论】：

【解决方案2】：

将滚动监听器附加到窗口： http://docs.jquery.com/Events/scroll

然后检查窗口的滚动顶部： http://docs.jquery.com/CSS

当scrollTop小于300时，显示()该div，否则隐藏()它。

【讨论】：

请注意，scrollTop 不能跨浏览器工作。您需要 window.scrollY 进行此测试。

【解决方案3】：

scrollTop 和 scrollY 看起来可以让你开始使用 IE 和 Firefox。不确定其他浏览器。

【讨论】：

【解决方案4】：

只检查滚动事件上的窗口scrollTop位置，并与元素offsetTop位置进行比较：

$(window).scroll(function(e){ 
  $el = $('.myElement'); 
  if ($(this).scrollTop() > $el.offset().top){ 
    $el.hide(); 
  } else { 
    $el.show();
});

运行此示例here。

【讨论】：