堆棧內存溢出
  簡體   English   中英

滾動時更改文本顏色

[英]Change text color while scrolling

 原文  2022-11-24 19:01:19  5   2    javascript/ html/ css

問題描述

我正在制作投資組合網站，我希望我的固定文本在某些部分改變顏色，我該怎么做？我不能發布我的代碼，因為它太大太長了，但如果你能給出代碼示例，那將是真的很高興，這就是它的樣子（ https://olaolu.dev ），你會看到按鈕和名稱在滾動時如何改變顏色:)

ps請用js做，謝謝！

我試圖查找信息，但沒有找到任何信息:(

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="/b/cs.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>

    <section class="section-top active" id="s1">
        
        <div class="details">
            <div class="top">
                <h2>Faxraddin</h2>
                <div class="lists">
                    <div class="nav-btn" id="nav-icon1" onclick="document.getElementById('nav-icon1').classList.toggle('open')">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="hide-it">
                    <div class="hide1">
                        <div class="p1">
                            <a class="hide1-btn">My Work</a>
                            <a class="hide1-btn">My Shelf</a>
                            <a class="hide1-btn">My Resume</a>
                        </div>
                         
                        <div class="p2">
                            <a class="hide-span">SAY HELLO</a>
                            <a class="hide-span">jncoicih@gmail.com</a>
                            <a class="hide-span">t/me.com</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="first-info">
                <div class="first-sec">
                    <h1>Frontend</br> Developer.</h1>
                    <h3 class="profession-info">I like to craft solid and scalable frontend products with great user experiences.</h3>
                </div>
                <img class="my-img" src="/b/images/Screenshot 2022-11-04 at 19.35.20.png">
            </div>

            <div class="some-info">
                <div class="a1">
                    <span>Highly skilled at progressive
                enhancement, design systems &
                UI Engineering.
                    </span>
                    <span>Over a decade of experience
                building products for clients
                across several countries.
                    </span>
                </div>

                <div class="btn-container">
                    <ul>
                        <a class="a" href="#s1"><div class="btn"></div></a>
                        <a class="a" href="#s2"><div class="btn"></div></a>
                        <a class="a" href="#s3"><div class="btn"></div></a>
                        <a class="a" href="#s4"><div class="btn"></div></a>
                        <a class="a" href="#s5"><div class="btn"></div></a>
                    </ul>
                </div>
            </div>

        </div>
    </section>

     
     <section class="what-do" id="s2">
         <div class="my-info">
            <div class="what-doing" id="i1">
                <h1>Design</h1>
                <p>
                    I'm probably not the typical designer positioned behind an Illustrator artboard adjusting pixels, but I design. Immersed in stylesheets tweaking font sizes and contemplating layouts is where you'll find me (~_^). I'm committed to creating fluent user experiences while staying fashionable.
                </p>
            </div>
            <div class="what-doing" id="i2">
                <h1>Engineering</h1>
                <p>
                    In building JavaScript applications, I'm equipped with just the right tools, and can absolutely function independently of them to deliver fast, resilient solutions optimized for scale — performance and scalabilty are priorities on my radar
                </p>
            </div>
         </div>
     </section>

    <section class="exp" id="s3">
        <div class="e1">
            <div class="exp-info">
                <h2>Over the</br> past 3 years,</h2>
                <p>I've built products for companies and businesses around the globe ranging from marketing websites to complex solutions and enterprise apps with focus on fast, elegant and accessible user experiences.</p>
                <p>Currently, I work at Shopify as a Senior UX Developer and Accessibility advocate crafting thoughtful and inclusive experiences that adhere to web standards for over a million merchants across the world.</p>
                <p>Before now, I was Principal Frontend Engineer at hellotax, where I worked on a suite of tools and services tailored at providing fast, automated VAT Registration / filings & Returns solutions for multi-channel sellers across Europe.</p>
                <p>Prior to hellotax, I was Senior frontend engineering contractor with Pixel2HTML, building JavaScript applications and interfaces for orgs and individuals.</p>
                <p>I once also led the frontend team at a Russian startup, Conectar through building multiple React applications into a single robust learning platform.</p>
            </div>
            <img class="exp-img" src="/b/images/2634454 copy.pdf">
        </div>
    </section>

    <section class="done" id="s4">
        <div class="grid">
            <div class="what-done">
                <div class="w1">
                    <h1>I buld & </br> deign stuff</h1>
                    <p>Open source 
                    projects, web apps 
                    and experimentals.
                    </p>
                    <button class="done-btn">see my work ---></button>
                </div>
                <div class="w2">
                    <h1>I write,</br>sometimes</h1>
                    <p>About design, 
                    frontend dev, 
                    learning and life.
                    </p>
                    <button class="done-btn">read my article ---></button>
                </div>
            </div>
        </div>
    </section>

    <section id="s5" class="send-me">
        <div class="send-container">
            <div class="send-top">
                <h1>Send me a message!</h1>
                <p>Got a question or proposal, or just want</br>
                    to say hello? Go ahead.</p>
            </div>
            <div class="send-inputs">
                <div class="l">
                    <label>Your Name</label>
                    <input type="text" placeholder="Enter your name">
                </div>

                <div class="l">
                    <label>Email Address</label>
                    <input type="text" placeholder="Enter your address">
                </div>
            </div>
            <div class="send-final">
                <input type="text" placeholder="Hi,i think we have to work together">
                <button class="shoot">SHOOT ---></button>
            </div>
        </div>
    </section>

    <section class="end-1" id="s6">
        <div class="end-container">
            <div class="end-info">
                <div class="e2" id="ll">
                    <span>SAY HELLO</span>
                    <span>hello@olaolu.dev</span>
                    <span>t.me/mrolaolu</span>
                </div>
                <div class="e2">
                    <span>My Work</span>
                    <span>My Shelf</span>
                    <span>My Resume</span>
                </div>
            </div>
            <h2 class="end-link">© Faxraddin Olawuyi 2022</h2>
        </div>
    </section>

    <script src="/b/js.js"></script>
</body>
</html>


    body {
    margin: 0;
    padding: 0;
    scroll-snap-type: y mandatory;
}

html{
    scroll-behavior: smooth;
}

.bar1, .bar2, .bar3 {
    width: 2.5vw;
    height: .35vw;
    background-color: #333;
    margin: 6px 0;
    transition: 0.2s;
}


.change .bar1 {
    transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
}

section{
    scroll-snap-align: start;
}

.section-top{
    height: 47vw;
    padding-bottom: 10vw;
}

.details{
    background-color:#0b2361;
    background-repeat: no-repeat;
    background-size: 100vw 100%;
}

.top {
    display: flex;
    justify-content: space-between;
    padding: 1vw;
    padding-bottom: 6vw;
}

.top h2{
    font-size: 2.2vw;
    margin: 0;
    margin-top: 30px;
    margin-left: 60px;
    color:#e9ecf4;
    position: fixed;
    z-index: 3;
}

.nav-btn {
    background: none;
    border: none;
    font-size: 3vw;
    cursor: pointer;
    position: fixed;
    right: 4.5vw;
    top:4vw;
    z-index: 3;
    padding-bottom: 2vw;
}

#l1{
    width: 3vw;
}

#l2{
    width: 2vw;
}

.first-info{
    display: flex;
    justify-content: space-between;
    width: 70vw;
    margin-left: 10vw ;
    padding-top: 30px;
}

.first-sec h1{
    font-size: 4.4vw;
    color: #f1554c;
}

.first-sec h3{
    width: 35vw;
    margin-top: -2vw;
    font-size: 1.5vw;
    color:#e9ecf4;
}

.my-img{
    width: 24vw;
    margin-top: 10px;
}

.a1{
    display: flex;
    justify-content: space-between;
    width: 35vw;
    margin-left: 10vw ;
    padding-top: 30px;
    color:#f1554c;
    margin-top: 20px;
    padding-bottom: 6.5vw;
    font-size: 1.3vw;
}

.a1 span{
    width: 45%;
    font-size: 1vw;
}


.some-info {
    display: flex;
    justify-content: space-between;
    width: 93vw;
}

.btn-container{
    position: fixed;
    z-index: 1;
    right: 0;
    padding-right: 5.5vw;
    margin-top: -3vw;
    
}

.btn-container ul{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn{
    margin:.7vw;
    cursor: pointer;
    z-index: 1;
    width: .2vw;
    height: .2vw;
    background-color: black;
    transform: rotate(45deg);
    border-style:solid;
    transition: 0.3s;
}

.what-do{
    background-repeat: no-repeat;
    background-size: 100vw 100%;
    height: 840px;
    background-color: #e9ecf4;
}

.my-info{    
    display: flex;
    margin-left: 7vw ;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.what-doing{
    width: 50%;
}

.what-doing h1{
    font-size: 4vw;
    color: #f1554c;
}

.what-doing p{
    font-size: 1.2vw;
    width: 30vw;
    margin-top: -2vw;
    color:#0b2361;
}

#i2{
    margin-top: 17vw;
    margin-left: 1vw;
}

.exp{
    height: 840px;
    background-color:#0b2361
}

.e1{
    display: flex;
    justify-content: space-between;
    width: 85vw;
    padding-top: 1vw;
    margin-left: -8vw;
    padding-bottom: 2vw;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.exp-info{
    display: flex;
    flex-direction: column;
    margin-left: 10vw;
    color: #e9ecf4;
}

.exp-info h2{
    font-size: 4.5vw;
    margin-bottom: 0;
}

.exp-info p{
    width: 25vw;
    font-size: 1.1vw;
}

.exp-img{
    height: 40vw;
    margin-top: 6vw;
}

.done{
    height: 840px;
    background-color:#e9ecf4;
}

.grid{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.what-done{
    display: flex;
    margin: auto;
    width: 90vw;
    height: 40vw;
    background-color: whitesmoke;
}

.w1{
    width: 50%;
    text-align: left;
    padding: 5vw;

}

.w2{
    width: 50%;
    text-align: left;
    padding: 5vw;
    border-left-style: solid;
    border-width: thin;
}

.w1 h1{
    font-size: 3.3vw;
    color: #f1554c;
}

.w1 p{
    font-size: 2vw;
    color:#0b2361;
}

.w2 h1{
    font-size: 3.3vw;
    color: #f1554c;
}

.w2 p{
    font-size: 2vw;
    color: #0b2361;
}

.done-btn{
    background: none;
    cursor: pointer;
    font-size: 1.3vw;
    padding: 1.3vw 5vw 1.3vw 5vw;
    margin-top: 3vw;
    color: #f1554c;
}

.hide-it{
    position: absolute;
    transition: 0.2s;
    background-color: white;
    height: 0;
    width: 25vw;
    position: fixed;
    right: 3vw;
    top:3vw;
    color: white;
}

.hide1{
    display: flex;
    flex-direction: column;
}

.p1{
    display: flex;
    flex-direction: column;
    padding-top: 6vw;
    padding-left: 2.7vw;
    transition: 0.1s;
    visibility: hidden;
    transition: 0.1;
}

.hide1-btn{
    border: none;
    background: none;
    font-size: 1.4vw;
    text-align: left;
    padding: 10px;
}

.p2{
    display: flex;
    flex-direction: column;
    padding-top: 6vw;
    padding-left: 2.7vw;
    transition: 0.1s;
    visibility: hidden;
    transition: 0.9;
}

.hode-1{
    font-size: 1.4vw;
    text-align: left;
    padding: 10px;
}

.hide-span{
    font-size: 1.4vw;
    text-align: left;
    padding: 10px;
}

.active{
    visibility: visible;
    height: 34vw;
    z-index: 2;
    color: black;
}

.active2{
    visibility: visible;
}
 
.btn.active1{
    background-color: white;
    width: .7vw;
    height: .7vw;
    transform: rotate(0deg);
    border-radius: 4px;
}

#nav-icon1 {
    width: 4vw;
    height: 3vw;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
  }
  
#nav-icon1 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 3.5vw;
    background: black;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }
  
  #nav-icon1 span:nth-child(1) {
    top: 0px;
  }
  
  #nav-icon1 span:nth-child(2) {
    top: 18px;
  }
  
  #nav-icon1 span:nth-child(3) {
    top: 36px;
  }
  
  #nav-icon1.open span:nth-child(1) {
    top: 18px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  
  #nav-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }
  
  #nav-icon1.open span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  
.send-me{
    height: 840px;
    background-color: #e9ecf4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.send-top h1{
    font-size: 3.3vw;
    text-align: center;
    color: #f1554c;
}

.send-top p{
    font-size: 1.7vw;
    color:#0b2361;
    text-align: center;
    margin-top: -2vw;
    padding-bottom: 5vw;
}

.send-inputs{
    display: flex;
    justify-content: space-between;
    width: 50vw;
}

.send-inputs input{
    outline: none;
    padding: 1vw 0vw 1vw 0vw;
    width: 21vw;
    height: 2vw;
    font-size: 1.3vw;
    border-bottom: 5px solid black;
    border-width: thin;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.send-inputs label{
    font-size: 1vw;
}

.l{
    display: flex;
    flex-direction: column;
}

.send-final{
    padding-top: 4vw;
    width: 50.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;    
}

.send-final input{
    background: none;
    font-size: 1.3vw;
    width: 100%;
    outline: none;
    padding: 1vw 0vw 1vw 0vw;
    height: 2vw;
    border-width: thin;
    border-bottom: 5px solid black;
    background: none;
    border-width: thin;
    border-top: none;
    border-left: none;
    border-right: none;
}

.shoot{
    border-width: thin;
    font-size: 1.3vw;
    border-color: black;
    margin-top: 4vw;
    width: 20vw;
    height: 4vw;

    background: none;
    cursor: pointer;
    font-size: 1.3vw;
    padding: 1.3vw 5vw 1.3vw 5vw;
}

.end-1{
    background-color: #0b2361;
    height: 830px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.end-container{
    display: flex;
    flex-direction: column;
    width: 80vw;
}

.end-info{
    border-width: thin;
    border-bottom: 5px solid #e9ecf4;
    background: none;
    border-width: thin;
    border-top: none;
    border-left: none;
    border-right: none;

    display: flex;
}

.e2{
    display: flex;
    flex-direction: column;
    font-size: 1.5vw;
    color: #e9ecf4;
    padding: 4vw 0vw 8vw 0vw;
}

.e2 span{
    padding-top: 1.5vw;
}

#ll{
    margin-top:-3vw;
    padding-right: 19vw;
}

.end-link{
    color: #e9ecf4;
    padding-top: 3vw;
}

2 個解決方案

解決方案1
 0  2022-11-24 19:57:21

我認為您需要的是路口觀察員。 路口觀察器允許您“觀察”目標並在其可見時做出反應。

我創建了一個小例子來證明這一點。 我們正在觀察第二section two 。 當它可見時，我們將顏色更改為紫色。 當它不可見時，我們將其改回黑色。 

 const title = document.querySelector('.topbar__title'); const sectionOne = document.querySelector('.section--one'); const sectionTwo = document.querySelector('.section--two'); const observer = new IntersectionObserver((entry, observer) => { entry[0].isIntersecting > 0? title.style.color = sectionTwo.getAttribute('data-color'): title.style.color = sectionOne.getAttribute('data-color') }); observer.observe(sectionTwo);
 * { margin: 0; padding: 0; box-sizing: border-box; }.topbar { position: fixed; top: 0; left: 0; padding: 1rem; width: 100%; background-color: white; }.section { height: 150vh; width: 100%; display: flex; align-items: center; justify-content: center; }.section--one { background-color: white; }.section--two { background-color: rgb(255 0 0 / 5%); }
 <div class="topbar"> <h1 class="topbar__title">Title</h1> </div> <section class="section section--one" data-color="black"> <h2>Section One</h2> </section> <section class="section section--two" data-color="purple"> <h2>Section Two</h2> </section>

當然你可以觀察多個部分，或者更改一個 class 而不是 os 使用 JS 設置樣式。 這只是一個簡單的例子......

在 MDN 上有一些關於 Intersection Observers 的好信息

解決方案2
 0  2022-11-24 20:09:54

訪問https://jsfiddle.net/walter_dev/rk270zfx/13/

<html>
<head>
    <title>Change Background on scroll</title>
</head>

<body>
    <h1>STAGE1</h1>
    <div id="stage1">
        <p>
            Praesent consectetur auctor lectus, eget faucibus libero facilisis vel. Duis sit amet bibendum lectus. Curabitur dapibus, tortor eu cursus posuere, elit ex ullamcorper ante, non eleifend erat lectus eu metus. Vivamus faucibus ornare lorem aliquam tincidunt. Praesent tempus, erat at faucibus egestas, turpis lorem consequat nisi, viverra rhoncus dui sapien id lacus. Curabitur ac magna nec neque malesuada ornare commodo ac tellus. Curabitur fermentum ex lobortis nisi rutrum egestas.
        </p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
    </div>

    <h1>STAGE2</h1>
    <div id="stage2">
        <p>
            Proin sagittis tellus pulvinar enim fermentum euismod. Nullam imperdiet imperdiet nisl. Fusce quis libero nisl. Morbi ultricies, purus placerat fermentum imperdiet, ipsum odio consequat tellus, eu blandit sapien mi tristique urna. Sed eu sapien a nulla placerat porttitor. Proin porta dictum dui eget euismod. Donec lobortis volutpat arcu at consequat. Morbi sed orci sit amet augue aliquet tincidunt.
        </p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
    </div>

    <h1>STAGE3</h1>
    <div id="stage3">
        <p>
            In vestibulum neque quis nibh pharetra hendrerit vitae eget tortor. Pellentesque placerat elit tempus, semper magna quis, mattis est. Fusce suscipit faucibus lectus, in tristique lacus porta vitae. Mauris nunc magna, posuere eget ex ut, malesuada ullamcorper mauris. Suspendisse placerat arcu eget dui maximus facilisis. Fusce ut metus elementum, bibendum odio in, consequat lacus. Maecenas interdum diam non magna dapibus ornare. Proin ut bibendum nisl. Cras vehicula vulputate mi, a eleifend nisl maximus ac. Vivamus ultrices pretium velit. Integer sodales tellus ultricies laoreet condimentum. Nam facilisis metus eu volutpat convallis. Duis molestie ornare orci eu dictum. Donec egestas massa vitae ligula efficitur viverra.
        </p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
    </div>

    <h1>STAGE4</h1>
    <div id="stage4">
        <p>
            Nam tempor ut dolor volutpat vestibulum. Aenean eu nulla at nunc volutpat eleifend vel quis mi. Proin aliquam tempus risus, at varius urna pulvinar at. Etiam dapibus aliquet volutpat. In arcu odio, feugiat id fermentum ac, fermentum in eros. Maecenas consequat gravida erat. Mauris ultrices justo rhoncus augue tristique mattis. Suspendisse blandit lorem nec purus ullamcorper cursus. Etiam vitae enim interdum, egestas mi et, suscipit ligula. Nulla nec ex convallis, malesuada purus vitae, dictum magna. Nam efficitur magna vel erat interdum rutrum. Maecenas ligula massa, ultrices at augue et, bibendum molestie lectus. Vestibulum lacinia dignissim rutrum. Donec justo urna, aliquet sed posuere in, mattis vitae ex. Proin condimentum risus arcu, eget consequat sapien vulputate mollis. Sed molestie pellentesque molestie.
        </p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
    </div>

    <h1>STAGE5</h1>
    <div id="stage5">
        <p>
            Vivamus vel leo orci. Ut semper egestas dui, in consectetur massa facilisis nec. Aliquam vestibulum efficitur enim id suscipit. Nam blandit, nunc in pharetra gravida, leo ex consequat massa, a faucibus nulla augue sit amet magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum urna et consequat. Nam consectetur tempor quam sit amet blandit. Vestibulum sodales ultrices pharetra. Vivamus et pellentesque nunc. Aliquam vehicula hendrerit magna, a ultricies ligula semper vel. Morbi auctor ut mi quis viverra.
        </p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
    </div>

    <script
        src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
        crossorigin="anonymous"></script>

    <script>
        function changeBackground(color) {
            document.body.style.background = color;
        }

        // changeBackground("#000");

        var position1 = $("#stage1").offset();
        var position2 = $("#stage2").offset();
        var position3 = $("#stage3").offset();
        var position4 = $("#stage4").offset();
        var position5 = $("#stage5").offset();

        $(window).scroll(function (event) {
            var scroll = $(window).scrollTop();
            // Do something

            console.log(scroll);

            if (scroll == 0) {
                changeBackground("#FFF");
            }
            else if (scroll > position1['top'] && scroll <= position2['top']) {
                changeBackground("red");
            }
            else if (scroll > position2['top'] && scroll <= position3['top']) {
                changeBackground("blue");
            }
            else if (scroll > position3['top'] && scroll <= position4['top']) {
                changeBackground("yellow");
            }
            else if (scroll > position4['top'] && scroll <= position5['top']) {
                changeBackground("brown");
            }
            else if (scroll > position5['top']) {
                changeBackground("green");
            }
        });
    </script>
</body>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 滾動時更改導航欄顏色 在滾動和單擊時更改導航文本顏色 滾動時更改導航文本和徽標顏色 Javascript水平滾動文本，更改顏色 如何在滾動圖像時將文本顏色從黑色更改為白色 如何在滾動時更改不同背景顏色的漢堡菜單顏色？ 在 React 或 Gatsby 中滾動時如何更改鏈接導航欄顏色？ 如果滾動時可見div，則對主體進行動畫處理並更改其背景顏色 向下滾動頁面時多次更改背景顏色 在另一個 div 中滾動時更改 div 背景顏色
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM