0

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

我希望它像这样工作:

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

    • 一旦页面上的滚动位置超过某个阈值,此页脚就会被隐藏
  • 当视口大于 900 像素时,它的行为就像普通页面一样......页脚将出现在内容之后。

我只是用背景图像制作原型。我实际上是在尝试执行您在 iOS 联系人应用程序中看到的操作(您正在查看的字母会一直停留,直到您滚动过去然后它会向上移动),只是我在底部而不是顶部进行操作。有没有人在浏览器中这样做过?

我可以使用媒体查询根据视口大小显示/隐藏粘性页脚,但我不知道如何对滚动位置做同样的事情。

4

1 回答 1

0

尝试这个

$(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
   }
});
于 2011-07-25T17:06:16.860 回答