滚动时更改固定位置 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.