滚动后更改导航栏颜色？

Question

如何设置没有背景颜色的导航栏？

在 div 之后向下滚动时，导航栏会获得新的背景颜色（导航栏应该固定在顶部，我在 Bootstrap 中使用navbar-fixed-top）

我尝试了一些教程，但没有成功。

这是网站：http://attafothman.olympe.in/
我说的是顶部的黑色导航栏。

Answer 1

这可以使用 jQuery 来完成。

这是fiddle的链接。

当窗口滚动时，比较窗口顶部和窗口高度之间的距离。当 if 语句为真时，背景颜色设置为透明。当您滚动回顶部时，颜色会变回白色。

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

    })
})

Answer 2

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