引导导航栏将颜色更改为滚动[重复]

Question

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

谢啦

Answer 1

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

Answer 2

下面是一个JSFIDLE示例。使用Jquery根据滚动像素位置更改背景颜色。

这是一个使用引导的小提琴

$(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');
       }
   });
    }
});

滚动后更改导航栏颜色的可能重复？