How to Change Navbar When You Start Scrolling

Scroll and Change the Navigation with Simple jQuery and CSS

Tweet
Share
Share
Pin

Use these snippets to change the navigation color when you scroll down on your website. 

JS

$(function () {
  $(document).scroll(function () {
    var $nav = $(".navbar-fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

CSS

.navbar-fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}

Documentation: https://stackoverflow.com/questions/23706003/changing-nav-bar-color-after-scrolling