粘性标头改变顶部颜色

Question

我想知道你能不能在这里帮我！我正在使用JS和CSS中的粘性标头。我想要的是，当标题位于页面的顶部时，它应该是灰色的-->在向下滚动时，它只是在向下滚动->它再次出现在向上滚动，但以黑色出现->当它到达页面顶部时，它再次变成灰色.我自己做不到，所以我在这里寻求帮助.这就是全部代码:到目前为止，我可以做到标题在顶部是灰色的->向下滚动时显示为disapier ->在黑色向上滚动时再次出现->但是当滚动到页面顶部时不能使它变为灰色。

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

它与4个css类一起工作：

    header {
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
height: 55px;
background-color: #eee;
z-index: 3;
margin-bottom: 42px;
}

.nav-up {
top: -55px;
}
.nav-down {
top:0px; background-color: #eee;
}
.nav-down-b {
top:0px; background-color: #1c1a1b;
}

以及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>

谢谢大家！！

Answer 1

对每个需要我想要的效果的人来说，我要修复它.这是正确工作的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;
}

使用上面我写的html和css。)希望你发现它有用！

Answer 2

试试这段代码，它可能对你有帮助。

​

    $(function () {

    // grab the initial top offset of the navigation
    var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;

    // our function that decides weather the navigation bar should have "fixed" css position or not.
    var sticky_navigation = function () {
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top

        // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
        if (scroll_top > sticky_navigation_offset_top) {
            $('#sticky_navigation').css({ 'position': 'fixed', 'top': 0, 'left': 0, 'z-index': 10000000, 'background': 'black', 'color':'white', 'width':'100%' });
        } 
      
      
      else {
            $('#sticky_navigation').css({ 'position': 'relative', 'background':'gray', 'width':'100%' });
        }
    };

    // run our function on load
    sticky_navigation();

    // and run it again every time you scroll
    $(window).scroll(function () {
        sticky_navigation();
    });

    // NOT required:
    // for this demo disable all links that point to "#"
    $('a[href="#"]').click(function (event) {
        event.preventDefault();
    });

    }); 

#demo_top_wrapper
{
  height:600px;
  }
#sticky_navigation
{
  background:gray;
  height:80px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="demo_top_wrapper">
        <div id="sticky_navigation_wrapper">
            <div id="sticky_navigation">
              this is sticky header
              </div>
          </div>
    </div>

​