当我滚动经过页面上的一个 div 时，我正在尝试更改导航栏的不透明度。我的代码如下。要更改不透明度，我正在尝试使用 jQuery 的 .fadeTo 方法。在滚动超过带有“splash”类的灵活 div 的高度后，我试图让它将不透明度淡化到 0.95(从 CSS 中概述的 0.75)。我究竟做错了什么？ .fadeTo 是否与这种技术不兼容？我该如何正确实现？
$(document).ready(function() {
$(window).scroll(function() {
var y = $(window).scrollTop();
var splashHeight = $("div.one").height();
if (y > splashHeight) {
$("nav").fadeTo("500", 0.95);
} else {
$("nav").fadeTo("500", 0.75);
};
});
})nav {
width: 100%;
position: fixed;
height: 50px;
top: 0px;
left: 0px;
background-color: white;
opacity: 0.75;
z-index: 1000;
}
nav ul {
display: block;
list-style: none;
text-align: center;
position: relative;
margin: 10px auto 0 auto;
width: 500px;
}
nav ul li {
display: inline;
width: 150px;
font-family: "Montserrat", sans-serif;
padding: 0 20px;
font-size: 18px;
text-align: center;
}
nav ul li a {
transition: all 0.6s ease;
color: #008040;
}
nav ul li a:hover {
color: black;
}
nav ul li.active {
cursor: default;
}
div.splash {
height: 100%;
width: 100%;
z-index: 1;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
opacity: 0.75;
}<html>
<head>
<title>DragonTech — Home</title>
<link href="css/foundation.min.css" rel="stylesheet" type="text/css" />
<link href="css/animate.css" rel="stylesheet" type="text/css" />
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<link href="css/app.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<nav>
<ul>
<li class="active">Home</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Appointment</a>
</li>
</ul>
</nav>
<div class="splash one">
</div>
</body>
</html>最佳答案
你可以这样做
$(document).ready(function() {
$(window).scroll(function() {
var y = $(window).scrollTop();
var splashHeight = $("div.one").height();
if (y > splashHeight) {
$("nav").css("opacity", '0.95');
} else {
$("nav").css("opacity", '0.75');
};
});
})
在你的CSS中
nav {
width: 100%;
position: fixed;
height: 50px;
top: 0px;
left: 0px;
background-color: white;
opacity: 0.75;
z-index: 1000;
transition: all 0.5s ease;
}
关于jquery - 滚动时 jQuery 的 .fadeTo 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28260631/