How to change from transparent to black Navigation when scroll down?-CodePudding

Sorry for my messy code...I'm a super beginner and I wanted to add Javascript even tho we just only discuss CSS and HTML at the moment.

I want this transparent Navigation turned to dark when scrolling down after the banner (please see the mockdown image: THIS IS THE WEB. And I want the search logo to be included to scroll down except Company Logo, bag icon and 'Join/Login' text.

These are my codes...

    <script src="script.js"> var nav=document.getElementById('nav');
      window.onscroll=function(){
          if(window.pageYOffset >100){
              nav.style.background="#007bff";
              nav.style.boxShadow="0px 4px 2px black";
          }
          else{
              nav.style.background="transparent";
              nav.style.boxShadow="none";
          }
      }</script>

*{
    padding:0px;
    margin:0px;
    box-sizing: border-box;
  }
  
  .topnav {
    width: 100%;
    background-size: cover;
  }
  
  .navbar{
      width: 100%;
      padding-bottom: 220px;
      position: fixed;
      top:-3%;
      margin-left: 35%;
      transition:.5 s;
  }
  
  .navbar ul li {
      list-style: none;
      display:inline-block;
      padding:8px;
      color:white;
      font-size: 1.5vw;   
      font-family: sans-serif;
      cursor: pointer;
      border-radius: 10px;
      transition:.5s;
  }
  .navbar ul li:hover{
      background:orange;
  }

.sitelogo img{ 
    height: 130px;
    width: auto;
    position: relative;
    left:-670px;
    bottom: 5px;
}

.fa-bag-shopping{
    margin-left: 1150px;
    position:relative;
    bottom: -20px;
    font-size:1.8em;
}

.login{
    position:relative;
    margin-left: 1050px;
    bottom: -45px;
}

.fa-magnifying-glass{
    margin-left: 556px;
    position:relative;
    font-size:1.8em;
}

   <nav >
    <div class = "navbar" id = "nav">
           <div class = "logoshopping">
      <a class ="login" style="color:white;"> Join/Login</a>
      <i  style = color:white;></i>
    </div>
      <div class = "sitelogo">
        <img src="Images/AnaheraLogo.png" alt="Anahera Logo">
      </div>
      <ul>
        <li>Home  |</li>
        <li>Shop  |</li>
        <li>Occasions |</li>
        <li>About  |</li>
        <li>Contact</a></li>
        <i  style = "color:white;"></i>
     </ul>
    </div>
   </nav>
</div>

I tried tutorials but I didn't succeed. Could you guys please help me with these?

THE MOCKUP WEBSIITE

CodePudding user response：

const nav = document.querySelector('.navbar');

window.addEventListener('scroll', () => {
    if (window.scrollY > 100) nav.style.background = 'black';
    else nav.style.background = 'white';
});

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

.topnav {
    width: 100%;
    background-size: cover;
    background: orange;
    height: 100px;
    min-width: 400px;
}

.navbar {
    width: 100%;
    position: fixed;
    top: 0px;
    transition: 0.5s;
    background: white;
    height: 100px;
    min-width: 400px;
}

.navbar ul li {
    list-style: none;
    display: inline-block;
    padding: 8px;
    color: white;
    font-size: clamp(1rem, 1.5vw, 2.5rem);
    font-family: sans-serif;
    cursor: pointer;
    border-radius: 10px;
    transition: 0.5s;
}
.navbar ul li:hover {
    background: orange;
}

<body style="height: 2000px; width: 100vw">
    <nav >
        <div  id="nav">
            <div >
                <a  style="color: white">Join/Login</a>
            </div>
            <div ><img src="Images/AnaheraLogo.png" alt="Anahera Logo" /></div>
            <ul>
                <li>Home |</li>
                <li>Shop |</li>
                <li>Occasions |</li>
                <li>About |</li>
                <li>Contact</li>
            </ul>
        </div>
    </nav>
</body>

CodePudding user response：

Simple Just Use Below jQuery | Note: Replace the class you, i have put navbar for example

  jQuery( function($){
        $(window).scroll( function() {
    
        if( $(this).scrollTop() > 10 ) {
            $('.navbar').css({ backgroundColor : 'black !important;' });
    
        } else {
            $('.navbar').css({ backgroundColor : 'transparent !important;' });
  
        }
    
        });
    });