向下滾動時添加一個類/更改導航欄的css屬性？

Question

我的導航欄的背景顏色在標題中是透明的。但是當我向下滾動，導航欄碰到下一部分時，我想讓它的背景顏色變黑。我試過的代碼不起作用。請看一看，看看我錯在哪裏？謝謝！

HTML：

<div class="header" id="header"> 
    <div class="container"> 

     <div class="img"><img src="img.jpg">  
     <button><a role="button" href="#about">&darr;</a></button> 

    </div> 
</div> 




<div class="about" id="about"> 
     <div class="container"> 
      <div class="row text-center top"> 
       <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> 
      </div> 
     </div> 
    </div> 

CSS：

.navbar-default { 
    background-color: transparent; 
    padding: 20px 0; 
    text-transform: uppercase; 
    border: none; 
} 

.nav-bg-black { 
    background-color: #000; 
} 

的jQuery：

$("#about").waypoint(function(direction){ 
     if(direction == "down"){ 
      $(".navbar-default").css("background-color", "#000"); 
     } else { 
      $(".navbar-default").css("background-color", "transparent"); 
     } 
    }, { 
      offset: '60px' 
    }); 

而且

$("#about").waypoint(function(direction){ 
     if(direction == "down"){ 
      $(".navbar-default").addClass("nav-bg-black"); 
     } else { 
      $(".navbar-default").removeClass("nav-bg-black"); 
     } 
    }, { 
      offset: '60px' 
    }); 

Answer 1

如果你正在使用的引導，你可以使用類.navbar逆

這裏是我試過的樣本，它是工作 鏈接：https://jsfiddle.net/ye7z26Lx/4/

代碼更改：

$(function(){  
    $("#about").waypoint(function(direction){ 
     if(direction == "down"){ 
      $(".navbar-default").addClass("navbar-inverse"); 
     } else { 
      $(".navbar-default").removeClass("navbar-inverse"); 
     } 
    }, { 
      offset: '60px' 
    }); 

    }) 

Answer 2

嘗試此代碼

var waypoint = new Waypoint({ 
    element: $("#about"), 
    handler: function (direction) { 
     if (direction == "down") { 
      $(".navbar-default").css("background-color", "#000"); 
     } else { 
      $(".navbar-default").css("background-color", "transparent"); 
     } 
    }, 
    offset: '60px' 
});