Question

我一直在尝试使用materializeCSS创建导航栏，并希望在滚动时更改背景颜色。出于某种原因，我无法完成这项工作。由于我使用的是MaterialiseCSS，只需在“导航”中添加和删除另一个类即可。不起作用。感谢您对此的帮助。

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

Answer 1

  $(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属性（例如，边距，背景，边框）。

Javascript更改nav的CSS属性背景（materializeCSS）

1 个答案: