javascript - Bootstrap 导航栏在滚动一定距离后淡出

Question

到目前为止，我在网上发现的所有内容都与航路点或滚动的 x 距离上的淡入淡出有关。

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

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

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

下面是 JS 代码，感谢成员(member) 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;
    });

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