我希望导航栏是透明的,但当您向下滚动页面时,它会变为红色,例如。
<div class="nav">
<div class="container">
<div class="logo">
<a href="#"><img src="RepublicSquare_logo.svg" style="height: 80px;"></a>
</div>
<div class="navMain">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
答案 0 :(得分:13)
这样的事情:
var a = $(".nav").offset().top;
$(document).scroll(function(){
if($(this).scrollTop() > a)
{
$('.nav').css({"background":"red"});
} else {
$('.nav').css({"background":"transparent"});
}
});
答案 1 :(得分:2)
如果有人想要一个非jquery解决方案(vanilla js),这里是:
document.addEventListener("DOMContentLoaded", function () {
var scrollStart = 0;
var nav = document.querySelector(".nav");
var offset = navbarElement.getBoundingClientRect();
document.onscroll = function (e) {
scrollStart = e.target.scrollingElement.scrollTop;
if (scrollStart > offset.top) {
nav.style.background-color, rgba(34,34,34,0.9);
} else {
nav.style.background-color = "transparent";
}
};
});
答案 2 :(得分:1)
OP解决方案。
<强> Jquery的强>
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('.nav');
var offset = startchange.offset();
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$('.nav').css('background-color', 'rgba(34,34,34,0.9)');
} else {
$('.nav').css('background-color', 'transparent');
}
});
});
<强> CSS 强>
.nav {
transition-duration: 1s;
}
这会让您的导航变得透明,当您滚动它时会改为rgba(34,34,34,0.9)