Javascript 更改 nav 的 CSS 属性背景 (materializeCSS)



我一直在尝试使用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 属性(例如,边距、背景、边框(的检索虽然在某些浏览器中有效,但不能保证。

最新更新