滚动后更改导航栏颜色？

Question

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

当在div之后向下滚动导航条时，导航条会得到一个新的背景颜色（导航条应该固定在顶部，我在引导中使用navbar fixed top）

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

这是网站：http://attafothman.olympe.in/
我说的是上面那个黑色导航条。

Answer 1

这是一个简单的纯javascript

var myNav = document.getElementById('mynav');
window.onscroll = function () { 
    "use strict";
    if (document.body.scrollTop >= 200 ) {
        myNav.classList.add("nav-colored");
        myNav.classList.remove("nav-transparent");
    } 
    else {
        myNav.classList.add("nav-transparent");
        myNav.classList.remove("nav-colored");
    }
};

在一些chrome版本中存在错误：

document.body.scrollTop

因此，您可以添加如下条件：

 if (document.body.scrollTop >= 200 || document.documentElement.scrollTop >= 200 )

当然你必须有两门课

.nav-colored { background-color:#000; }
.nav-transparent { background-color:transparent;}

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

Answer 3

下面是在窗口滚动后更改导航栏颜色的最简单方法：

添加跟随JS到头：

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

这个CSS代码

.navbar-fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}

当滚动超过导航栏的高度时，固定导航栏的背景颜色将变为白色。

参见follow JsFiddle