滚动一定距离后的Bootstrap Navbar Fadeout

Question

到目前为止我在网上发现的一切都与滚动的航点或x距离有关。

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

到目前为止，我已经让它单独淡出滚动动作。 我在这里偶然发现了几种不同的方法，在我发布代码的代码中。 这似乎是迄今为止最好的方法，虽然它在移动设备上感觉很糟糕。 我已经在某处读过这种代码，但不应该用于移动平台。

为了更加客观，我想在向下滚动屏幕1/3的距离时将导航栏淡出淡出。

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

可以在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;
    });

Answer 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;
});