Navbar change color on scroll code example

Example 1: change scrollbar color

.scrollable-element {
  scrollbar-color: red yellow; /* red is for the thumb and yellow is for the track */
}

Example 2: on scroll change navbar color

$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).scrollTop() > $(window).height()){
            $(".menu").css({"background-color":"transparent"});   
        }
        else{
            $(".menu").css({"background-color":"white"});
        }

    })
})

Example 3: javascript on scroll change nav color

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

Tags:

Css Example