Bootstrap navbar change color to the scroll

Question

I use bootstrap for a theme, and I saw this site :http://www.luatix.org/en/ and I like the effect on navbar. Change color when scroll down and change color of elements.

Thanks

Answer 1

Here is a jsfiddle example. Using Jquery to change the background color based on scroll pixel position.

Here is a fiddle using bootstrap

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#startchange');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $(".navbar-default").css('background-color', '#f0f0f0');
       } else {
          $('.navbar-default').css('background-color', 'transparent');
       }
   });
    }
});

Possible Duplicate of Changing nav-bar color after scrolling?

Answer 2

With pure Javascript:

window.onscroll = function() {myFunction()};

function myFunction() {
  if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
    //change the background-color to white
  } else {
    //change the background-color to blue
  }
}