当滚动处于活动状态时，使页脚消失

make footer disappear when scroll is active

本文关键字：消失 滚动 活动状态      更新时间：2023-09-26

我使用的是jQuery mobile。

如何在滚动处于活动状态时使页脚消失？

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

HTML片段如下：

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

使用$.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/

使用jquery滚动事件。

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

类似（未测试！）的东西：

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

请参阅测试页面

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内部
相关文章：