Hinzufügen einer Klasse/Änderung der css-Eigenschaft von navbar beim Scrollen nach unten?

Question

Die Hintergrundfarbe meiner Navbar ist in der Kopfzeile transparent. Aber wenn ich nach unten scrolle und die Navigationsleiste den nächsten Abschnitt erreicht, möchte ich, dass die Hintergrundfarbe schwarz wird. Der Code, den ich ausprobiert habe, funktioniert nicht. Bitte schau und sieh wo ich falsch liege? Vielen Dank!

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

Und

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

Answer 1

Wenn Sie Bootstrap verwenden, können Sie Klasse .navbar-inverse

Hier ist die Probe verwenden, habe ich versucht, und es funktioniert -Link: https://jsfiddle.net/ye7z26Lx/4/

Änderungen am Code:

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

    }) 

Answer 2

Try Dieser Code

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