スクロールダウン時にnavbarのクラス/変更CSSプロパティを追加しますか？

Question

My navbarの背景色がヘッダーで透明です。しかし、私が下にスクロールし、navbarが次のセクションに当たると、私は背景色を黒に変えたい。私が試したコードは動作していません。見て、私が間違っている場所を見てください？ありがとう！

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