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

时间:2015-03-14 11:34:48

标签: javascript jquery html css

我在这里有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;
}

4 个答案:

答案 0 :(得分:2)

向后滚动时需要重置应用的样式。一般来说,避免使用这样的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/

答案 1 :(得分:1)

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

答案 2 :(得分:0)

它可能有两种方式。

1)在样式表

中的background类上添加.navbar属性

2)在background部分

中添加else属性

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

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

答案 3 :(得分:0)

如果使用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&lt; fixmetop'比较。我只有IE8的问题而没有指定小于滚动(特别是水平滚动)。只要确保它的行为符合您的要求。