Breaking News: Grepper is joining You.com. Read the official announcement!

navbar fixed change color on scroll

Ali Zulfikar answered on March 6, 2022 Popularity 9/10 Helpfulness 4/10

answer navbar fixed change color on scroll

related change color of navbar on scroll

navbar fixed change color on scroll

Comment

var myNav = document.getElementById('mynav');
window.onscroll = function () { 
    "use strict";
    if (document.body.scrollTop >= 200 ) {
        myNav.classList.add("nav-colored");
        myNav.classList.remove("nav-transparent");
    } 
    else {
        myNav.classList.add("nav-transparent");
        myNav.classList.remove("nav-colored");
    }
};

Popularity 9/10 Helpfulness 4/10 Language whatever

Source: stackoverflow.com

Tags: fixed navbar scroll whatever

Link to this answer
Share Copy Link

Contributed on Mar 06 2022

Ali Zulfikar

0 Answers Avg Quality 2/10

Closely Related Answers

change color of navbar on scroll

Comment

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS styles for the navbar */
    .navbar {
      transition: background-color 0.5s; /* Add a smooth transition effect */
    }
    
    .navbar-scrolled {
      background-color: #333; /* New color when scrolled */
    }
  </style>
  <script>
    window.addEventListener('scroll', function() {
      var navbar = document.querySelector('.navbar');
      var navbarHeight = navbar.offsetHeight;
      
      if (window.scrollY > navbarHeight) {
        navbar.classList.add('navbar-scrolled');
      } else {
        navbar.classList.remove('navbar-scrolled');
      }
    });
  </script>
</head>
<body>
  <nav class="navbar">Navbar</nav>
  
  <!-- Rest of the page content -->
  
</body>
</html>

Popularity 7/10 Helpfulness 4/10 Language html

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

navbar fixed change color on scroll

Contents

More Related Answers

navbar fixed change color on scroll

Closely Related Answers

change color of navbar on scroll

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.