Javascript 滚动一定距离后引导导航栏淡出

到目前为止，我在网上找到的所有东西都与航路点上的淡入淡出或x距离滚动有关

然而，我需要我的导航栏在移动一定距离后淡出，无论滚动从页面的何处开始

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

为了更客观一点，我希望导航栏在向下滚动屏幕1/3距离时淡出，而不管起始点是什么

下面是感谢Tushar成员的JS代码

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

var lastScrollTop=0，delta=5；
$（窗口）。滚动（功能（事件）{
var st=$（this.scrollTop（）；
if（Math.abs（lastScrollTop-st）lastScrollTop）{
//向下滚动代码
$（“.navbar”）.fadeOut（）
}否则{
//upscroll码
$（“.navbar”）.fadeIn（）；
}
lastScrollTop=st；
});

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

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

var lastScrollTop=0，delta=5；
/*addEventListener（“滚动”，函数（）*/
$（窗口）。滚动（功能（事件）{
var st=$（this.scrollTop（）；
if（Math.abs（lastScrollTop-st）lastScrollTop）{
//向下滚动代码
$（“.navbar”）.stop（）.fadeOut（'fast'））
}否则{
//upscroll码
$（“.navbar”）.stop（）.fadeIn（'fast'）；
}如果（window.scrollY<500）{
$（'.navbar'）.stop（）.fadeIn（'fast'）；
}
lastScrollTop=st；
});

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

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

var lastScrollTop=0，delta=5；
/*addEventListener（“滚动”，函数（）*/
$（窗口）。滚动（功能（事件）{
var st=$（this.scrollTop（）；
if（Math.abs（lastScrollTop-st）lastScrollTop）{
//向下滚动代码
$（“.navbar”）.stop（）.fadeOut（'fast'））
}否则{
//upscroll码
$（“.navbar”）.stop（）.fadeIn（'fast'）；
}如果（window.scrollY<500）{
$（'.navbar'）.stop（）.fadeIn（'fast'）；
}
lastScrollTop=st；
});