javascript - 向下滚动时导航栏更改背景，但向上滚动时不会变回

Question

我这里有JS代码:

  var fixmeTop = $('.navbar').offset().top;
  $(window).scroll(function() {
      var currentScroll = $(window).scrollTop();
      if (currentScroll >= fixmeTop) {
          $('.navbar').css({
              position: 'fixed',
              top: '0',
              margin:'auto',
              background: 'white',
              color: 'rgba(0,0,0,0.6)',
              padding: '10px'
          });
          $('li a').css({
              color: 'rgba(0,0,0,0.6)'
          });
      } else {
          $('.navbar').css({
              position: 'static'
          });
      }
  });

问题是，当我向下滚动时它确实发生了变化。但是当我向上滚动到原来的位置时，它不会变回来。我希望导航在下降时改变它的背景，填充和颜色，但是当它回到原来的位置(它的顶部栏，在浏览器顶部)时，它应该变回背景:无，颜色:rgba( 0,0,0,0.6) 和 padding:20px 谢谢。

这是html

<div class="navbar">
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li> <a href="#">About</a></li>
        <li> <a href="#">Portfolio</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

和CSS:

.navbar{
    margin:auto;
    text-align: center;
    padding:20px;
    float:left;
    width:100%;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
li {
    display:inline-block;
}
li a {
    min-width:140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: white;
    background: none;
    text-decoration: none;
    padding:15px;
}
li:hover a {
    border-bottom:3px solid #EB9532;
}

Answer 1

您需要在向后滚动时重置应用的样式。一般来说，避免使用这样的 css 方法，因为它不是很灵活。如果将样式移至 CSS 并仅在导航栏上切换类名，则可以显着简化代码:

var $navbar = $('.navbar'),
    fixmeTop = $navbar.offset().top;

$(window).scroll(function () {
    var currentScroll = $(window).scrollTop();
    $navbar.toggleClass('fixed', currentScroll >= fixmeTop);
});

使用 CSS:

.navbar.fixed {
    position: fixed;
    top: 0;
    margin: auto;
    background: white;
    color: rgba(0,0,0,0.6);
    padding: 10px;
}

.navbar.fixed li a {
    color: rgba(0,0,0,0.6);
}

演示: http://jsfiddle.net/fgm3yvL9/