想要在到达具有不同背景的另一个部分时更改导航栏字体颜色

Question

我的问题是这样的。我有一个固定的导航栏，我必须根据其下方部分的背景更改列表字体颜色。例如，当我向下滚动并到达背景颜色为黑色的第二部分时，我的第一部分背景为黑色，导航栏字体颜色为白色，导航栏字体颜色变为黑色。这是代码

function parallax(element,distance,speed){
    const item = document.querySelector(element);
    item.style.transform = `translateY(${distance * speed}px)`;
}
window.addEventListener("scroll",function() {
    parallax(".video",window.scrollY,1);

});
var vid = document.getElementById("specsVid");
vid.playbackRate = 1.7;

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    
    
}
body{
    background: black;
    font-family: 'Poppins', sans-serif;
    
}
section{
    height:100vh ;
}
.homepage video{
    height: 80vh;
    position: absolute;
    bottom: 0vh;
    left: 30vh;
    z-index: -3;
    
}
nav{
    position: fixed;
    z-index: 1;
}
li {
    display: inline-block;
}
nav a {
    color: white;
    text-decoration: none;
    font-size: 1.4rem;
    margin-left: 10vh;
    position: relative;
    top: 5vh;
    left: 55vh;
}

nav  a:hover{
    opacity: 0.8;
}
video::-webkit-media-controls {
    display:none ;
}
.specs{
    background: white;
}
.specsVid{
    height: 80vh;
    width: 90%;
    position: relative;
    top: 20%;
    left: 5%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mohamed amine wannes project</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">


</head>
<body>
    <section class="homepage" id="homepage">
        <a href=""><video  class="video" id="myVideo" src="Video.mp4"   muted autoplay  ></video></a>
        
        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="#specs">Specs</a></li>
                <li><a href="">Models</a></li>
                <li><a href="">Pricing</a></li>
            </ul>
        </nav>
    </section>
    <section class="specs" id="specs">
        <video src="specs.mp4" class="specsVid" id="specsVid" autoplay muted></video>
        <nav class="specsNav">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="#specs">Specs</a></li>
                <li><a href="">Models</a></li>
                <li><a href="">Pricing</a></li>
            </ul>
        </nav>


    </section>
    <script src="app.js"></script>
</body>
</html>

Answer 1

您可以通过 JS 根据相对于视口的部分偏移设置 class 的样式：

document.onscroll = function() {
  const specs = document.querySelector('#specs');
  const nav = document.querySelector('nav');
  
  if(specs.getBoundingClientRect().top <= 0) { // if the distance of the 'specs' section to the browser top is smaller than 0
    nav.classList.add('dark'); // add dark font color
  } else {
    nav.classList.remove('dark'); // remove dark  font color
  }
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    
    
}
body{
    background: black;
    font-family: 'Poppins', sans-serif;
    
}
section{
    height:100vh ;
}
nav{
    position: fixed;
    z-index: 1;
}
li {
    display: inline-block;
}
nav  a:hover{
    opacity: 0.8;
}
video::-webkit-media-controls {
    display:none ;
}
.specs{
    background: white;
}

/* IMPORTANT CSS */
nav a {
    color: white;
    text-decoration: none;
    font-size: 1.4rem;
    margin-left: 10vh;
    position: relative;
    top: 5vh;
    left: 55vh;
}
nav.dark a {
    color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mohamed amine wannes project</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">


</head>
<body>
    <section class="homepage" id="homepage">
        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="#specs">Specs</a></li>
                <li><a href="">Models</a></li>
                <li><a href="">Pricing</a></li>
            </ul>
        </nav>
    </section>
    <section class="specs" id="specs">
        <nav class="specsNav">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="#specs">Specs</a></li>
                <li><a href="">Models</a></li>
                <li><a href="">Pricing</a></li>
            </ul>
        </nav>


    </section>
    <script src="app.js"></script>
</body>
</html>

想要在到达具有不同背景的另一个部分时更改导航栏字体颜色

want to change the navbar font color when it reaches another section with a different background

html

javascript

css

navbar