我試圖讓背景圖像減少滾動時的不透明度，一旦離開登陸頁面，使用 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>
您需要新增
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; }