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

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）和填充：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/

Answer 2

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',
              background:none, 
              color: rgba(0,0,0,0.6),
              padding:20px
          });
      }
  });

Answer 3

它有两种可能的方式。

1）在样式表中的.navbar类上添加background属性

2）在else部分添加background属性

喜欢

.navbar{
    margin:auto;
    text-align: center;
    padding:20px;
    background: none;
    float:left;
    width:100%;
}

要么

else {
          $('.navbar').css({
              position: 'static',
              background: 'none',
          });

Answer 4

如果使用jQuery更改CSS值，则必须始终使用jQuery更改它们。 jQuery不会向您的页面添加新类。 它将样式添加到源中的标记本身。 检查导航栏标签，然后向下滚动以查看我的意思。

由于内联样式通常总是优先考虑，因此如果不删除您添加的CSS（使用jQuery）或覆盖您添加的CSS（使用jQuery），导航栏将永远不会更改。

我建议覆盖，因为它更简单。 您只需要添加与要应用的初始CSS相反的比较。 在这种情况下，没有具有略微透明文本的背景：

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)'
      });
  }
  if (currentScroll < fixmeTop) {
      $('.navbar').css({
          'background':'none',
          'color':'rgba(0,0,0,0.6)'
      });
    }

根据个人经验，我建议使用'currentscroll <fixmetop'比较。 我只有IE8的问题而没有指定小于滚动（特别是水平滚动）。只要确保它的行为符合您的要求。