Javascript 滚动到顶部JQUERY时更改导航背景色

我是JQuery的新手，我正在尝试构建一个向下滚动时隐藏的导航，向上滚动时以黑色背景重新出现

到目前为止，我已经做到了这一点，但现在我希望在滚动回页面顶部时，导航的背景颜色从黑色变为透明

这是我的进步-

我希望达到与此导航相同的效果-

这是我的密码：

/*隐藏导航栏*/
//向下滚动时隐藏标题
卷轴；
var lastScrollTop=1；
varδ=5；
var navbarHeight=$（'nav'）.outerHeight（）；
$（窗口）。滚动（功能（事件）{
didcoll=true；
});
setInterval（函数（）{
如果（滚动）{
哈斯克罗尔（）；
didcoll=false；
}
}, 250);
函数hasScrolled（）{
var st=$（this.scrollTop（）；
//确保它们滚动的次数大于增量
if（Math.abs（lastScrollTop-st）lastScrollTop&&st>navbarHeight）{
//向下滚动
$（'nav'）.removeClass（'nav-down'）.addClass（'nav-up'）；
}否则{
//向上滚动
如果（st+$（窗口）.height（）<$（文档）.height（））{
$（'nav'）.removeClass（'nav-up'）.addClass（'nav-down，nav blk'）；
}
}
lastScrollTop=st；
}

正文{
背景色：#阿巴巴；
}
导航{
宽度：100%；
保证金：0自动；
/*文本对齐：居中；
显示：内联*/
显示：表格；
垂直对齐：中间对齐；
文本对齐：居中；
位置：固定；
高度：自动；
不透明度：1.8；
字间距：20px；
/*边框底部：#5c实心1px*/
高度：5vh；
}
导航a{
文字装饰：无；
颜色：#fff；
}
导航a：悬停{
颜色：#9f9f9f；
字号：700；
}
导航a：已访问{
颜色：#fff；
}
.导航{
位置：固定；
顶部：0px；
颜色：#fff；
填充顶部：15px；
垫底：0px；
文本转换：大写；
字体大小：.75em；
过渡：前0.2秒缓进缓出；
z指数：1；
}
.导航{
顶部：-10vh；
}
.nav blk{
背景色：#000；
不透明度：.7；
}

试试这个：

$(document).ready(function () {
  $(window).scroll(function () {

  if($(window).scrollTop() > 1) {
    // your code
  }

 });
});

试试这个：

$(document).ready(function () {
  $(window).scroll(function () {

  if($(window).scrollTop() > 1) {
    // your code
  }

 });
});

---

你想得不对。

scroll

事件将在每次实际滚动时触发。没有必要添加每250ms运行一次的函数（即不需要

setInterval

）来检查是否滚动

只需将整个js替换为：

$(window).scroll(function() {
    var currentScroll = $(document).scrollTop(); // the current scrollTop position
    var navbarHeight = $('nav').outerHeight();

    if (currentScroll > navbarHeight) {
        $('nav').removeClass('nav-down').addClass('nav-up');
    } else {
        $('nav').removeClass('nav-up').addClass('nav-down nav-blk');
    }
});

---

有关scrollTop（）的详细信息：

您的想法是错误的。

scroll

事件将在每次实际滚动时触发。没有必要添加每250ms运行一次的函数（即不需要

setInterval

）来检查是否滚动

只需将整个js替换为：

$(window).scroll(function() {
    var currentScroll = $(document).scrollTop(); // the current scrollTop position
    var navbarHeight = $('nav').outerHeight();

    if (currentScroll > navbarHeight) {
        $('nav').removeClass('nav-down').addClass('nav-up');
    } else {
        $('nav').removeClass('nav-up').addClass('nav-down nav-blk');
    }
});

---

有关

scrollTop（）

的更多信息：

在

$（窗口）时编辑js:add class
nav top
。scrollTop（）==0

，否则删除该类

function hasScrolled() {
  var st = $(this).scrollTop();


  if(st == 0){
     $('nav:not(:nav-top)').addClass("nav-top");
  }
  else{
     $('nav').removeClass("nav-top");
  }

  // Make sure they scroll more than delta
  if (Math.abs(lastScrollTop - st) <= delta)
    return;

  // If they scrolled down and are past the navbar, add class .nav-up.
  // This is necessary so you never see what is "behind" the navbar.
  if (st > lastScrollTop && st > navbarHeight) {
    // Scroll Down
    $('nav').removeClass('nav-down').addClass('nav-up');
  } else {
    // Scroll Up
    if (st + $(window).height() < $(document).height()) {
      $('nav').removeClass('nav-up').addClass('nav-down, nav-blk');
    }
  }

  lastScrollTop = st;
}

---

编辑到js：在

$（窗口）时添加类
nav top
。scrollTop（）==0

，否则删除该类

function hasScrolled() {
  var st = $(this).scrollTop();


  if(st == 0){
     $('nav:not(:nav-top)').addClass("nav-top");
  }
  else{
     $('nav').removeClass("nav-top");
  }

  // Make sure they scroll more than delta
  if (Math.abs(lastScrollTop - st) <= delta)
    return;

  // If they scrolled down and are past the navbar, add class .nav-up.
  // This is necessary so you never see what is "behind" the navbar.
  if (st > lastScrollTop && st > navbarHeight) {
    // Scroll Down
    $('nav').removeClass('nav-down').addClass('nav-up');
  } else {
    // Scroll Up
    if (st + $(window).height() < $(document).height()) {
      $('nav').removeClass('nav-up').addClass('nav-down, nav-blk');
    }
  }

  lastScrollTop = st;
}

---

在后台持续运行一个函数，检查您是否在已收听

滚动

事件时滚动，这绝对不是一个好的做法。实际上，这是一个好的做法。请参阅下方有关滚动事件的部分。它统计实际滚动时执行的次数。但当你们在页面上闲着的时候，这不算。在空闲状态下，

.scroll（）

不会被触发，因为无论发生什么情况，

setInterval

的回调函数都将每隔250ms触发一次。虽然他的解决方案不是最好的，但这是一个很好的尝试，可以缓解IE和一些移动浏览器上由于1ms事件触发而造成的巨大延迟。即使是这个相当粗糙的版本也比每次浏览器触发滚动事件时访问DOM要好得多。然而，OP应该摆脱

didcroll

的思维方式，因为我们已经知道何时滚动（从

scroll

事件中）。在后台运行一个函数，检查您是否在已经收听

scroll

事件时滚动，这肯定不是一个好的做法。实际上，这是一个好的做法。请参阅下方有关滚动事件的部分。它统计实际滚动时执行的次数。但当你们在页面上闲着的时候，这不算。在空闲状态下，

.scroll（）

不会被触发，因为无论发生什么情况，

setInterval

的回调函数都将每隔250ms触发一次。虽然他的解决方案不是最好的，但这是一个很好的尝试，可以缓解IE和一些移动浏览器上由于1ms事件触发而造成的巨大延迟。即使是这个相当粗糙的版本也比每次浏览器触发滚动事件时访问DOM要好得多。然而，OP应该摆脱

didcroll

的思维方式，因为我们已经知道何时滚动（从

scroll

事件）。