滚动超过一定高度后使用jQuery隐藏HTML元素

Question

我正在尝试在这里为演示制作一些原型。

我希望它像这样工作：

• 当视口高度小于 900 像素时，页面底部会附加一个固定位置的页脚。

  • 一旦页面上的 SCROLL 位置超过某个阈值，此页脚就会被隐藏

• 当视口大于 900px 时，它的行为就像一个普通页面...页脚将出现在内容之后。

我只是用背景图片制作原型。我实际上是在尝试执行您在 iOS 联系人应用程序中看到的内容（您正在查看的字母会一直显示，直到您滚动过去然后它会向上移动），只是我在底部而不是顶部进行操作。有人在浏览器中这样做过吗？

我可以使用媒体查询根据视口大小显示/隐藏粘性页脚，但我不知道如何对滚动位置执行相同的操作。

Answer 1

试试这个

$(window).scroll(function(){
   var $win = $(window);
   var scrollTopThreshold = 200;
   if($win.height() < 900){//first condition
      //position the footer to the base of the page using css or jquery
   }
   else if($(document).scrollTop() > scrollTopThreshold){//second condition
      //Hide the footer
   }
   else if($win.height() > 900){//thrid condition
      //let footer appear at the bottom of the content
   }
});