javascript - 滚动事件时使页脚消失

我正在使用jQuery mobile。

滚动活动时如何使页脚消失？

当滚动停止时，我想再次显示页脚。

HTML代码段如下所示：

<div id="footer" data-role="footer" data-position="fixed" data-corners="false">

最佳答案

See Test Page

var pageIsScrolling = (function(){
   var timer, body = $(document.body);
   return function(){
       clearTimeout(timer);
       timer = setTimeout(scrollEnd, 250);
       body .addClass('scrolling');
   }

   function scrollEnd(){
       timer = null;
       body.removeClass('scrolling');
   }
})();

$(window).on('scroll.scrolling', pageIsScrolling);

现在，每当您开始滚动时，主体都有一个scrolling类，您可以在CSS中对其进行定位，如下所示：

.scrolling > footer{ opacity:0; }

甚至为页脚添加过渡效果，使其看起来更平滑。
（我很确定这也适用于jQuery mobile）



笔记：


我可以直接使用javascript的footer元素进行操作，但是我相信使用通用状态类是在整个应用程序中更改状态的更好方法，然后您可以从中获取想要在CSS中执行的任何操作，因此，在这里，所需的状态类是“滚动”。
我在这里使用自定义事件名称空间，这是一个好习惯
使用元素缓存（正文）
scrollEnd函数是分开的，并且不直接写在setTimeout内部以提高可读性。