滚动一定距离后的引导导航栏淡出答案

【问题标题】：Bootstrap Navbar Fadeout after Scrolling Certain Distance滚动一定距离后的引导导航栏淡出
【发布时间】：2017-01-04 00:58:04
【问题描述】：

到目前为止，我在网上找到的所有内容都与航点上的褪色或滚动的 x 距离有关。

但是，我需要我的导航栏在移动一定距离后淡出无论页面上滚动的开始位置。

到目前为止，我已经让它仅在滚动动作上淡入淡出。我在这里和在我发布代码的 codepen 上偶然发现了几种不同的方法。到目前为止，这似乎是最好的方法，尽管在移动设备上感觉有问题。我在某处读过这种代码，但不应该用于移动平台。

为了在这里更客观，我希望导航栏在向下滚动屏幕 1/3 的距离时淡出，无论起点是什么。

以下是 JS 代码，感谢成员 Tushar。

完整的工作代码可以在这里找到codepen。

var lastScrollTop = 0, delta = 5;
    $(window).scroll(function(event){
       var st = $(this).scrollTop();

       if(Math.abs(lastScrollTop - st) <= delta)
          return;

       if (st > lastScrollTop){
           // downscroll code
           $(".navbar").fadeOut()
       } else {
          // upscroll code
          $(".navbar").fadeIn();

       }
       lastScrollTop = st;
    });

【问题讨论】：

标签： javascript jquery twitter-bootstrap css-animations

【解决方案1】：

这更像是一个更新，也是迄今为止我能想到的最好的“工作”解决方案。

使用 .stop() 似乎可以消除移动设备上的一些故障平台。
我添加了另一个 if 语句，它强制导航栏在 x 远离顶部时出现。当超出此范围时，旧代码会接管。

到目前为止的问题是我注意到淡入淡出仅在滚动完全停止时触发。这会破坏用户体验。上述渐变速度增加的补丁似乎可以在移动设备上提供更流畅的体验。

var lastScrollTop = 0, delta = 5;
/*window.addEventListener("scroll", function()*/

$(window).scroll(function(event){
  var st = $(this).scrollTop();

  if(Math.abs(lastScrollTop - st) <= delta)
    return;

  if (st > lastScrollTop){
    // downscroll code
    $(".navbar").stop().fadeOut('fast')
  } else {
    // upscroll code
    $(".navbar").stop().fadeIn('fast');

  }if (window.scrollY < 500) {
        $('.navbar').stop().fadeIn('fast');
    }
  lastScrollTop = st;
});

【讨论】：