Zmiana koloru w menu po scrollowaniu w dół (toggle)

Question

Cześć Wszystkim!

Mam problem z użyciem toggle(), nie mam pojęcia gdzie moge robić bład. Może jakaś wskazówka?

<header class="navbar navbar-inverse navbar-fixed-top animated-header" id="top-nav">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
                        <span class="sr-only"> Toggle navigation </span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>    
                    </button>
                </div>
                <!-- Menu Items -->
                <nav class="collapse navbar-collapse navbar-right" id="mainNavBar">
                    <ul class="nav navbar-nav" id="nav">
                         <li> <a href="#home">strona głowna</a>
                        <li> <a href="#about">o mnie</a>
                        <li> <a href="#technology">technologie</a>
                        <li> <a href="#projects">projekty</a>
                        <li> <a href="#contact">kontakt</a>
                    </ul>
                </nav>
                
            </div>
        </header>

 $(document).ready(function(){
      $(window).scroll(function(){
        if ($(window).scrollTop() > 100 && !$( ".animated-header" ).hasClass( "animated-header" ) || $(window).scrollTop() === 0 && $( ".animated-header" ).hasClass( "animated-header-act" )){
            $('.navigation').toggleClass( "animated-header-act");
        }

     });
    });

.animated-header-act{
    background-color: red;
}

 

Answer 1

innerHTML i tutaj zmaiana koloru w stylach

Comments

Nie rozumiem?

Answer 2

Cześć!

Czy możesz dokładniej opisać swój problem?
Z tego co zrozumiałem chcesz po "zescrollowaniu" w dół dodać klasę która zmieni background-color menu tak? :)

Comments

Dokładnie tak :)

---

W takim razie polecam jednak addClass/removeClass, przykład ponizej. Jeżeli zeskrolujesz o wysokosc przegladarki doda do nav klasę shrink :) możesz oczywiście prosto przerobić to na toggle ;) 

$(window).scroll(function() {
    wHeight = $(window).height()
    if ($(document).scrollTop() > wHeight) {
        $('nav').addClass('shrink');
    } else {
        $('nav').removeClass('shrink');
  }
});

---

Rozwiązanie z toggle ;) 

$(window).on("scroll", function() {
    wHeight = $(window).height()
    $("nav").toggleClass("shrink", $(this).scrollTop() > wHeight)
});