我一直在尝试使用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)');
}
});
});
发布于 2018-06-09 06:01:14
$(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属性(例如,边距,背景,边框),虽然功能与某些浏览器,但不是保证。
https://stackoverflow.com/questions/50767896
复制相似问题