Ich versuche, die Deckkraft des Hintergrundbilds beim Scrollen und außerhalb der Zielseite zu verringern, indem ich Vanilla-Javascript verwende, um sie auf mindestens 0,5 zu senken. Ich habe versucht, Math.max() in die Bildlauffunktion einzufügen, um den Wert nur auf 0,5 zu senken, aber dadurch blieb das Bild auf allen Seiten bei 0,5.
Ich möchte, dass die Zielseite immer eine Deckkraft von 1 und alle anderen Seiten eine Deckkraft von 0,5 haben. Ich kann den Bildlauf animieren, muss ihn aber bei 0,5 stoppen.
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>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您需要添加
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; }