This is the image This is the java script i used to change the background-color when scroll down. But here the background color is changing when i scroll down but there is another issue of image coming infront of navbar when scrolled down.

     window.onscroll = function() {scrollFunction()};
     function scrollFunction() {
     if(document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
     document.getElementById("navbar").style.background = "black" ;

     // document.getElementsByClassName("img").style.z-index = "-1" ;
    

     }
     else{
     document.getElementById("navbar").style.background = "transparent";
     }

     }

Here i want the image to be on the backside of navbar when i scroll down and when the background color changes. This is the CSS i have used.

    #navbar{
    align-items: center;
    display: flex;
    top: 0px;
    position: sticky;
    background: transparent;
    }

    #service-container{ 
     display: grid;
    padding: 30px;
    width: 96%;
    height: 100%;
     background-image: linear-gradient(to bottom right,rgb(255, 255, 255),rgb(226, 162, 
    194),rgb(196, 113, 154),rgb(248, 138, 193));
     z-index: -1;
    }
    #service-container .h-primary2{ 
     margin: 15px 43px;
    padding: 50px;
    font-family: 'Libre Baskerville', serif;
    text-align: center;
    font-weight:900;
    }
    #services{
        font-family: 'Libre Baskerville', serif;
    }
    .columns img{
     width: 50%;
     height: 50%;
    }
     div .from-right{
     float: right; 
     text-align: center;
     grid-column: 3/4;
     transform: translateX(50%);
     }

     div .from-left{
     float: left;
     text-align: center;
     grid-column: 2/3;
     transform: translateX(-50%);
   
     }

here only the images are coming in front of navbar but the text content is behind the navbar which is fine.
This is a big question but please help me out i have tried few things those are not working. This is the same issue with the home section where i have SIGN IN and SIGN UP buttons which are coming infront of the navbar

**AS i'm still learning javascript and don't actually know what changes to be made. Hope i have tried to explain the issue clearly **

CodePudding user response：

fix the position of the image under the nav bar or to the nav bar itself

CodePudding user response：

You can set the z-index of the navbar.

W3Schools Article

For example:

#navbar {
    z-index: 999;
}

The navbar now displays on top of anything with a z-index below 999.