Question

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

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

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

为了更加客观，我想在向下滚动屏幕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

这更像是一个更新，最好的＆＃34;工作＆＃34;到目前为止，我能够提出解决方案。

使用.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;
});

滚动一定距离后的Bootstrap Navbar Fadeout

1 个答案: