Question

我正在使用jQuery mobile。

滚动激活时如何让页脚消失？

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

HTML代码段如下所示：

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

Answer 1

使用jquery滚动事件。

您可以在文档中找到相关信息：http://api.jquery.com/scroll/

某些事情（未经测试！）：

$(window).scroll(function() {
  $("#footer").hide();
});

Answer 2

滚动时使用$.scroll隐藏页脚，滚动停止时使用setTimeout再次显示页脚：

var scrolling;
$(window).scroll(function() {
    clearTimeout(scrolling);//clear any existing timeout
    $("#footer").hide();
    scrolling = setTimeout(function(){$("#footer").show();},100);//set the timeout to hide the footer (will be cancelled if scrolling continues)
})

http://jsfiddle.net/c6uqdhjo/1/

Answer 3

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中以提高可读性。

滚动激活时，页脚会消失

3 个答案:

See Test Page

注释：