在滚动超出某个高度后，使用jQuery隐藏HTML元素

Question

我试图在这里做一些原型进行演示。

我喜欢它的工作原理如下：

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

  • 一旦页面上的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
   }
});