Saya cuba menjadikan imej latar belakang mengurangkan kelegapan pada tatal dan sekali sahaja meninggalkan halaman pendaratan, menggunakan javascript vanila untuk menurunkannya kepada minimum 0.5. Saya cuba menambah Math.max() dalam fungsi tatal untuk hanya menjatuhkannya kepada 0.5, tetapi ia menyebabkan imej kekal pada 0.5 untuk semua halaman.
Saya mahu halaman pendaratan sentiasa mempunyai kelegapan 1 dan semua halaman lain mempunyai kelegapan 0.5. Saya dapat menghidupkan tatal tetapi memerlukannya berhenti pada 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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda perlu menambah
Math.min而不是Math.maxseperti yang ditunjukkan di bawah: (Saya juga menambahwindow.onload以便在代码片段中运行，但如果您的脚本加载是defered yang tidak wajib)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; }