Javascript 基于屏幕高度的去抖动隐藏DIV

我正在制作一个简单的侧导航页面，它有一个固定的位置，设置在顶部：30%。我需要做的是在页面底部，我想淡出菜单，这样它就不会与页脚重叠，下面的代码可以工作，但我认为它在滚动上的检查太多了，当你快速向下滚动时，需要花费很长时间来计算

是否有更快/更轻的方法来计算何时隐藏侧导航？我不熟悉去Bounning，但它会有帮助吗

要素：

.body-container-wrapper - total height of page
.footer-container-wrapper - total height of the footer that we want the nav to be hidden at
.internal-side-nav - the menu position: fixed, top: 30%, right: 0

示例页面：

脚本：

<script type="text/javascript">
$(document).scroll(function () {
   var y = $(this).scrollTop();
   if (y < $('.body-container-wrapper').outerHeight() - $('.footer-container-   wrapper').outerHeight() - 400 ) {
    $('.internal-side-nav').fadeIn();
 } else {
    $('.internal-side-nav').fadeOut();
 }
});
</script>

$（文档）。滚动（函数（）{
var y=$（this.scrollTop（）；
如果（y<$（'.body容器包装器'）.outerHeight（）-$（'.footer容器-包装器'）.outerHeight（）-400）{
$（'.internal side nav'）.fadeIn（）；
}否则{
$（'.internal side nav'）.fadeOut（）；
}
});

我没听说过debounce，所以我不得不查一下。它可能会有帮助，但这将是一个额外的插件，你必须包括和维护，它可能不会完全按照你想要的方式工作（我没有看到任何迹象表明它有“束或时间框架”，只是看起来像束，这意味着它可能会在你身上晚发射）

相反，你可以做的是自己控制一下时间

var scrollTimeInterval = 200; // how often we allow the action to trigger, in ms.
var lastScrollTime = 0;
var scrollTimeoutId = null;
$(document).scroll(function () {
   var now = (new Date()).getTime();
   var dScrollTime = now - lastScrollTime;
   lastScrollTime = now;

   if (dScrollTime < scrollTimeInterval) {
        // Set a timeout so we catch the last one.
        scrollTimeoutId = setTimeout(function() { $(document).scroll(); }, scrollTimeInterval - dScrollTime);
        return; // too soon, so we'll skip
   }

   // Clear any potentially pending timeout.
   clearTimeout(scrollTimeoutId);

   var y = $(this).scrollTop();
   if (y < $('.body-container-wrapper').outerHeight() - $('.footer-container-   wrapper').outerHeight() - 400 ) {
    $('.internal-side-nav').fadeIn();
 } else {
    $('.internal-side-nav').fadeOut();
 }
});

var scrollTimeInterval=200；//我们允许动作触发的频率，以毫秒为单位。
var lastScrollTime=0；
var scrollTimeoutId=null；
$（文档）。滚动（函数（）{
var now=（new Date（））.getTime（）；
var dScrollTime=now-lastcrolltime；
lastScrollTime=现在；
if（dScrollTime<滚动时间间隔）{
//设置一个超时，这样我们就能赶上最后一个。
scrollTimeoutId=setTimeout（函数（）{$（document）.scroll（）；}，scrollTimeInterval-dScrollTime）；
return；//太快了，所以我们跳过
}
//清除任何可能挂起的超时。
clearTimeout（scrollTimeoutId）；
var y=$（this.scrollTop（）；
如果（y<$（'.body容器包装器'）.outerHeight（）-$（'.footer容器-包装器'）.outerHeight（）-400）{
$（'.internal side nav'）.fadeIn（）；
}否则{
$（'.internal side nav'）.fadeOut（）；
}
});

这样，如果自上次触发滚动事件以来没有经过一定的时间，滚动事件就不会做任何事情。为了确保捕获最后一个滚动事件（停止滚动之前的最后一个事件），我添加了一个超时，它将最后一次触发滚动事件。我们还必须确保在另一个scroll事件触发之前处理它（所以我们不会重复处理它）

您可以使用第一个变量控制它允许的时间间隔。如果200毫秒感觉有点慢，你可以把它缩短到100毫秒或50毫秒，看看这是否能提供更好的平衡

---

希望能有所帮助。

处理滚动事件，在某些情况下，您无能为力

解决方案1:设置每次迭代时自动取消的超时

我相信这种方法是最有效的，但可能对您来说并不理想，因为在300毫秒内，sidenav会在消失之前在视觉上与页脚重叠

var scrollTimeout = false;
$(document).scroll(function(){
  clearTimeout(scrollTimeout);
  var _this = this; // for the setTimeout function to know what "this" is
  scrollTimeout = setTimeout(function(){
    // your original code block goes here
    // BUT, replace "this" with "_this"
  }, 300);
});

以上内容基本上只在用户至少300毫秒未滚动时运行代码

解决方案2:只是很好的旧优化（没有太多技巧）

这个解决方案应该立即隐藏sidenav，但仍然在每个滚动上运行，只是做得更少

var myScrollEvent = (function(){
  var $win = $(window);
  var $foot = $('.footer-container-wrapper');
  var footer_top = $foot.offset().top; // where on the page the footer begins
  var $nav = $('.internal-side-nav');
  var nav_height = $nav.height(); // maybe use outerHeight(true)?...who knows, only you
  var is_hidden = false;

  // this is the actual function we want to run on-scroll
  return function(){
    // jquery, even on fixed elements, still seems to account for scroll position
    // when calculating top offset value, below is the coordinate of the bottom of the nav
    var nav_bottom = $nav.offset().top + nav_height;

    // if the bottom coord of the nav is lower than the top coord of the footer
    if(nav_bottom > footer_top && !is_hidden){
      is_hidden = true;
      // hide it code
    }else if(is_hidden){
      is_hidden = false;
      // show it code
    }
  };

})();

$(window).scroll(myScrollEvent);

这里的想法是缓存一些变量，并以稍微不同的方式进行计算。你的方式似乎没有任何错误，但这只是一种选择。注意，使用这种方法，我们假设导航高度永远不会改变

如果您愿意，也可以将这两种解决方案结合起来

---

另外，请注意，我还没有做过任何browser-2-browser测试，因此如果有任何缺陷，当然要告诉我。

我喜欢#2的方向，但我无法让它工作。我现在正在看它，思考@和超越？到底出了什么问题？有一点没有指定，那就是您需要在

$（document）.ready（）

回调中包含整个块，才能使其正常工作。除此之外，试着安慰代码中的变量，看看这些值是否是您期望的值