当我向下滚动并向上滚动或将鼠标悬停在上方时，如何使导航栏透明？我试图用jQuery做到这一点，但我并没有真正工作。这是我的HTML和CSS：
<DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="LunchWebsiteCSS.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(
{
previousTop: 0
},
function () {
var currentTop = $(window).scrollTop();
if (currentTop < this.previousTop) {
//$(".sidebar em").text("Up"); /* optional for demo */
$(".nav").css({ opacity: 0.5 });
} else {
//$(".sidebar em").text("Down");
$(".nav").css({ opacity: 0 });
}
this.previousTop = currentTop;
});
});
</script>
<script src="js/jjquery.js"></script>
</head>
<body>
<div class="nav">
<ul>
<div class="btn-group">
<li><a href="#">Browse</a>
</li>
<li><a href="#">Sign Up</a>
</li>
<li>BHS Lunch</li>
<li><a href="#">Log In</a>
</li>
<li><a href="#">Help</a>
</li>
</div>
</ul>
</div>
</body>
.nav {
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
width: 100%;
/*border: 1px solid black;*/
/*background-color: #AA3C39;*/
background-color: #AA3C39;
/*opacity: 0.7;*/
position: fixed;
}
这就是您可以做到的。
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>100)
$(".nav").css({"background-color" : "rgba(0,0,0,.5)"});
else
$(".nav").css({"background-color" : "rgba(0,0,0,1)"});
});
});
使用CSS在悬停时重新查看
.nav:hover
{
background-color:rgba(0,0,0,1);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句