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

Question

My problem is this. I have a fixed navigation bar and I have to change the list font color based on the background of the section under it. for example i have the first section background black and navbar font color is white when i scroll down and reach the second section which has a background color of black the navbar font color turns black . here is the code

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>

Does this answer your question? [Changing nav-bar color after scrolling?](https://stackoverflow.com/questions/23706003/changing-nav-bar-color-after-scrolling) — 404 - Brain Not Found, Oct 15 '20 at 10:27

score 1 · Accepted Answer · answered Oct 15 '20 at 10:26

You can just style the class based on the sections offset to the viewport via JS:

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>

No problem! In that case please mark your question as solved @MEMER — MauriceNino, Oct 15 '20 at 10:39

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

1 Answers1