JavaScript如何更改NAV(MatalizeCSS)的CSS属性背景?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (61)

我一直试图使用MaterializeCSS创建一个导航栏,并希望在滚动页上更改背景色。 由于我使用的是MaterializeCSS,所以在“nav”中添加和删除另一个类是行不通的。该如何实现?

HTML

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo">Web</a>
    <a href="#" data-target="mobile-nav" class="sidenav-trigger">
      <div class="menu-icon"><i class="material-icons">menu</i></div>
    </a>
    <ul class="right hide-on-med-and-down">
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Other</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

CSS

  nav {
    position: fixed;
    background: rgba(0, 0, 0, 0.4);
  }

以下代码可能会有一些错误:

  $(document).ready(function(){
    $(window).scroll(function(){
      if($(window).scrollTop()>200){
        $("nav").css('background','#000');
      }else{
        $("nav").css('background','rgba(0, 0, 0, 0.4)');
      }
    });
  });
提问于
用户回答回答于
  $(function(){
    $(window).scroll(function(){
      var bgcolor = ($(window).scrollTop()>200)?'#000':'rgba(0, 0, 0, 0.4)';
      $("nav").css('background-color', bgcolor);
    });
  });

http:/api.jquery.com/css/检索简写CSS属性(例如边距、背景、边框)。

扫码关注云+社区

领取腾讯云代金券