Добавление свойства class/change css navbar при прокрутке вниз?

Question

Цвет фона моего навигатора прозрачен в заголовке. Но когда я прокручиваю вниз и 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

Try этот код

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