Bootstrap导航栏将颜色更改为滚动

Question

我使用bootstrap作为主题，我看到了这个网站：http://www.luatix.org/en/，我喜欢导航栏上的效果。向下滚动时更改颜色并更改元素的颜色。

由于

Answer 1

这是jsfiddle example。使用Jquery根据滚动像素位置更改背景颜色。

这是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');
       }
   });
    }
});

Changing nav-bar color after scrolling?

可能重复

Answer 2

使用纯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
  }
}