Question

我正在尝试一个非常基本的布局，该布局具有4格，第一和第三格具有深蓝色背景，第二和第四格具有白色背景。我的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>

Answer 1

您似乎没有任何事件侦听器来跟踪当前滚动位置。基本上，我以相反的顺序创建了每个节的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的颜色

1 个答案: