Rumah > Soal Jawab > teks badan
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>
P粉5584781502024-04-05 12:56:14
Anda perlu menambah Math.min
而不是 Math.max
seperti yang ditunjukkan di bawah:
(Saya juga menambah window.onload
以便在代码片段中运行,但如果您的脚本加载是 defer
ed 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; }
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