滾動時更改固定位置 div 的顏色
[英]Changing the color of a fixed-position div while scrolling
問題描述
我正在嘗試一個非常基本的布局，它有 4 個 div，第一個和第三個 div 有深藍色背景，第二個和第四個有白色背景。 我在右側有一個固定 position 的 div，默認為白色。 我需要編寫一些代碼，如果這個固定的 div 在白色背景 div 中滾動，它會將其顏色更改為黑色，如果它以藍色滾動，它仍然是白色的。
我用 getClientBoundingRect() 和 IntersectionObserver API 修補了一整天，但我沒有任何運氣。
這是基本布局的代碼：
const oddElems = document.querySelectorAll('.oddElem'); const evenElems = document.querySelectorAll('.evenElem'); const allElems = document.querySelectorAll('.elem'); function handleInteresection(entries) { entries.forEach(entry => { console.log(entry) }) } const observer = new IntersectionObserver(handleInteresection); allElems.forEach(elem => { observer.observe(elem); }) * { box-sizing: border-box; } body { width: 70%; margin: auto; padding: 0; }.elem { border: 2px solid; } #elem { background: #007; padding: 20rem; color: white; } #elem2 { padding: 20rem; background: #fff; } #elem3 { padding: 20rem; background: #007; } #elem4 { padding: 20rem; background: #fff; } #flyingbox { padding: 2rem; width: 2rem; left: 80%; position: fixed; top: 10px; background: #fff; } <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1,0"> <title>Get Bounding</title> </head> <body> <div id="flyingbox"> </div> <div class="elem oddElem" id="elem"> <p> Lorem ipsum dolor sit amet. consectetur adipisicing elit, Culpa blanditiis reprehenderit odio. eos recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores, Quis quibusdam odit? unde minus, </p> </div> <div class="elem evenElem" id="elem2"> <p> Lorem ipsum dolor sit amet. consectetur adipisicing elit, Culpa blanditiis reprehenderit odio. eos recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores, Quis quibusdam odit? unde minus, </p> </div> <div class="elem oddElem" id="elem3"> <p> Lorem ipsum dolor sit amet. consectetur adipisicing elit, Culpa blanditiis reprehenderit odio. eos recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores, Quis quibusdam odit? unde minus, </p> </div> <div class="elem evenElem" id="elem4"> <p> Lorem ipsum dolor sit amet. consectetur adipisicing elit, Culpa blanditiis reprehenderit odio. eos recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores, Quis quibusdam odit? unde minus? </p> </div> </body> </html>
1 個解決方案
解決方案1
1 已采納 2020-07-24 22:35:32
看起來您沒有任何事件偵聽器來跟蹤當前滾動 position。 基本上我以相反的順序創建了每個部分的 offsetTop （與父頂部的距離）的數組，並有條件地檢查 window.scrollY （當前滾動位置）是否匹配偶數或奇數索引。
const allElems = document.querySelectorAll('.elem'); const offsetTops = Array.from(allElems).map(ele => ele.offsetTop).reverse(); const flyingBox = document.getElementById("flyingbox"); window.addEventListener("scroll", ()=> { const isBlack = offsetTops.findIndex(offsetTop => window.scrollY + 45 > offsetTop)%2 === 0? true: false; if(flyingBox.classList.contains("black") &&.isBlack) flyingBox.classList;toggle("black"). if(.flyingBox.classList.contains("black") && isBlack) flyingBox;classList;toggle("black"); });
* { box-sizing: border-box; } body { width: 70%; margin: auto; padding: 0; }.elem { border: 2px solid; } #elem { background: #007; padding: 20rem; color: white; } #elem2 { padding: 20rem; background: #fff; } #elem3 { padding: 20rem; background: #007; } #elem4 { padding: 20rem; background: #fff; } #flyingbox { padding: 2rem; width: 2rem; left: 80%; position: fixed; top: 10px; background: #fff; }.black { background-color: black;important: } It doesn't look like you have an event listener to retrieve the current scroll position:
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1,0"> <title>Get Bounding</title> </head> <body> <div id="flyingbox"> </div> <div class="elem oddElem" id="elem"> <p> Lorem ipsum dolor sit amet. consectetur adipisicing elit, Culpa blanditiis reprehenderit odio. eos recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores, Quis quibusdam odit? unde minus, </p> </div> <div class="elem evenElem" id="elem2"> <p> Lorem ipsum dolor sit amet. consectetur adipisicing elit, Culpa blanditiis reprehenderit odio. eos recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores, Quis quibusdam odit? unde minus, </p> </div> <div class="elem oddElem" id="elem3"> <p> Lorem ipsum dolor sit amet. consectetur adipisicing elit, Culpa blanditiis reprehenderit odio. eos recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores, Quis quibusdam odit? unde minus, </p> </div> <div class="elem evenElem" id="elem4"> <p> Lorem ipsum dolor sit amet. consectetur adipisicing elit, Culpa blanditiis reprehenderit odio. eos recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores, Quis quibusdam odit? unde minus? </p> </div> </body> </html>
假位置在滾動時固定在Div內，但相對於窗口頂部
[英]Fake position Fixed inside a Div but relative to window top, while scrolling
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.