Javascript 粘性标题更改顶部颜色

我想知道你是否能在这里帮助我！我正在使用JS和CSS中的粘性标题。我想要的是，当页眉位于页面顶部时，它应该是灰色-->在向下滚动时，它只是禁用-->它在向上滚动时再次出现，但以黑色-->显示，当它到达页面顶部时，它再次变为灰色。。。我自己做不到，所以我在这里请求一些帮助。。。这是全部代码： 到目前为止，我可以使页眉在顶部为灰色-->在向下滚动时取消-->在黑色-->上滚动时再次显示，但无法使其在滚动到页面顶部时变回灰色

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
didScroll = true;
});

setInterval(function () {
 if (didScroll) {
    hasScrolled();
    didScroll = false;
   }
}, 20);

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

// 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
    $('header').removeClass('nav-down').addClass('nav-up');
} else {
    // Scroll Up
    if(st < $(document).height()) {
        $('header').removeClass('nav-up').addClass('nav-down-b');
    }
}

if (st > lastScrollTop){
    // Scroll Down
    $('header').removeClass('nav-down-b').addClass('nav-up');
}

lastScrollTop = st;
}

以及HTML：

    <header class="nav-down clearfix"> 

  <div class="container">
      <div class="pull-left logo-neg"><img src="/images/PW-emblem-neg.png"></div>
    <ul id="user-menu" class="pull-right">
      <li><a href="/customer-service"><img src="/images/Icon_Nav_Magnify.svg" alt="glass"></a></li>
      <li><a href="/customer-service"><img src="/images/Icon_Nav_Cart.svg" alt="cart"> </a></li>
      <li><a href="/customer-service"><img src="/images/Icon_Nav_Info.svg" alt="info"> </a></li>
      <li><a href="/customer-service"><img src="/images/Icon_Nav_Heart.svg" alt="favorits"> </a></li>
    </ul>
  </div>
</header>

---

提前谢谢大家

试试这段代码，它可能会对您有所帮助

$（函数（）{
//获取导航的初始顶部偏移量
var sticky_navigation_offset_top=$（“#sticky_navigation”）.offset（）.top；
//我们的功能决定导航栏是否应该有“固定”css位置。
var sticky_navigation=函数（）{
var scroll_top=$（window）.scrollTop（）；//我们当前从顶部的垂直位置
//如果滚动的次数超过导航，请将其位置更改为“固定”以粘贴到顶部，否则将其更改回“相对”
如果（滚动\u顶部>粘性\u导航\u偏移\u顶部）{
$（“#粘性导航”）.css（{“位置”：“固定”，“顶部”：0，“左”：0，“z索引”：10000000，“背景”：“黑色”，“颜色”：“白色”，“宽度”：“100%”）；
} 
否则{
$（'sticky_navigation'）.css（{'position'：'relative'，'background'：'gray'，'width'：'100%}）；
}
};
//在加载时运行我们的函数
粘性_导航（）；
//并在每次滚动时再次运行它
$（窗口）。滚动（函数（）{
粘性_导航（）；
});
//不需要：
//对于此演示，请禁用指向“#”的所有链接
$（'a[href=“#”]”）。单击（函数（事件）{
event.preventDefault（）；
});
}); 
#演示(顶部)
{
高度：600px；
}
#粘性导航
{
背景：灰色；
高度：80px；
}

这是粘性头
对于所有需要我想要的效果的人，我会修复它。。。这是正常工作的javascript代码：

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
didScroll = true;
});

setInterval(function () {
if (didScroll) {
    hasScrolled();
    didScroll = false;
}
}, 20);

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

// 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
    $('header').removeClass('nav-down').addClass('nav-up');
} else {
    // Scroll Up
    if(st < $(document).height()) {
        $('header').removeClass('nav-up').addClass('nav-down-b');
    }
}

if (st < delta){
    // Scroll Down
    $('header').removeClass('nav-down-b').addClass('nav-down');
}


lastScrollTop = st;
}

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

使用我上面写的html和css：希望你觉得它有用
 您希望在滚动时标题消失吗？当你向上滚动时，它应该在那里，并且是灰色的？当你向上滚动时，它应该是黑色的，但是当它到达页面顶部时，它应该再次变为灰色（当页眉在顶部时，它应该始终是灰色的，只有向上滚动时才是黑色的（向下滚动时才是黑色的），效果很好：）但是，当向下滚动时，我该如何使其不可用？我正在尝试使用：if（滚动_-top>sticky _-navigation _-offset _-top）{$（'sticky _-navigation'）.addClass（'nav-up'）}，其中nav-up=top:-55px；但这只会让我的头固定在顶部空地上以帮助你！：）
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
didScroll = true;
});

setInterval(function () {
if (didScroll) {
    hasScrolled();
    didScroll = false;
}
}, 20);

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

// 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
    $('header').removeClass('nav-down').addClass('nav-up');
} else {
    // Scroll Up
    if(st < $(document).height()) {
        $('header').removeClass('nav-up').addClass('nav-down-b');
    }
}

if (st < delta){
    // Scroll Down
    $('header').removeClass('nav-down-b').addClass('nav-down');
}


lastScrollTop = st;
}