我试图让背景图像减少滚动时的不透明度，一旦离开登陆页面，使用 vanilla javascript 将其降至最低 0.5。我尝试在滚动函数中添加 Math.max() 使其仅降至 0.5，但它会导致所有页面的图像保持在 0.5。
我希望目标网页的不透明度始终为 1，而所有其他页面的透明度为 0.5。我能够制作滚动动画，但需要它停在 0.5。
const landingHeight = document.getElementById("section-landing").offsetHeight;
window.onscroll = function() {
const opcFilter = (window.pageYOffset/ landingHeight);
document.body.style.background = "linear-gradient(rgba(255, 255, 255, " + opcFilter + "), rgba(255, 255, 255, " + opcFilter + ")), url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg) no-repeat";
}
body{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
scroll-behavior: smooth;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg);
background-repeat: no-repeat;
background-attachment: fixed !important;
background-size: cover !important;
background-position: center top !important;
}
nav{
width: 100%;
background: #C1C8D0;
overflow:hidden;
position: fixed;
top:0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
float: right;
}
a{
padding: 5px;
width: 130px;
display: block;
text-align: center;
font-weight: bold;
color: black;
text-decoration: none;
}
div{
height: 1000px;
overflow: scroll;
}
<body>
<nav>
<ul>
<li><a href="#section-page2">Page 2</a></li>
<li><a href="#section-page1">Page 1</a></li>
<li><a href="#section-landing">Landing Page</a></li>
</ul>
</nav>
<div class="section" id="section-landing">
<h1 class="title ">Landing Page</h1>
<p>
The background image here will have an opacity of 1. As we scroll to the next page, the opacity will transition to 0.5.
</p>
</div>
<div class="section" id="section-page1">
<h1>Page 1</h1>
<p>
Opacity is now have 0.5 and will stay there for the remaining pages. Scrolling back up to the landing page will set opacity to 1.
</p>
</div>
<div class="section" id="section-page2">
<h1>Page 2</h1>
<p>
Another page of opacity 0.5
</p>
</div>
</body>
P粉5584781502024-04-05 12:56:14
您需要添加 Math.min 而不是 Math.max ，如下所示：
（我还添加了一个 window.onload 以便在代码片段中运行，但如果您的脚本加载是 defered 则不是强制性的）
window.onload = () => {
const landingHeight = document.getElementById("section-landing").offsetHeight;
window.onscroll = () => {
const opcFilter = Math.min(0.5, window.pageYOffset / landingHeight);
document.body.style.background = `linear-gradient(rgba(255, 255, 255, ${ opcFilter }), rgba(255, 255, 255, ${ opcFilter })), url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg) no-repeat`;
}
}
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
scroll-behavior: smooth;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg);
background-repeat: no-repeat;
background-attachment: fixed !important;
background-size: cover !important;
background-position: center top !important;
}
nav {
width: 100%;
background: #C1C8D0;
overflow: hidden;
position: fixed;
top: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
float: right;
}
a {
padding: 5px;
width: 130px;
display: block;
text-align: center;
font-weight: bold;
color: black;
text-decoration: none;
}
div {
height: 1000px;
overflow: scroll;
}
Landing Page
The background image here will have an opacity of 1. As we scroll to the next page, the opacity will transition to 0.5.
Page 1
Opacity is now have 0.5 and will stay there for the remaining pages. Scrolling back up to the landing page will set opacity to 1.
Page 2
Another page of opacity 0.5