• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
462 wizyt
pytanie zadane 14 kwietnia 2017 w JavaScript przez Daniel Kudyba Obywatel (1,260 p.)

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

 

2 odpowiedzi

0 głosów
odpowiedź 14 kwietnia 2017 przez prominepl Bywalec (2,440 p.)
innerHTML i tutaj zmaiana koloru w stylach
komentarz 14 kwietnia 2017 przez Daniel Kudyba Obywatel (1,260 p.)
Nie rozumiem?
0 głosów
odpowiedź 14 kwietnia 2017 przez Wesoły Pan Rekin Początkujący (440 p.)
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? :)
komentarz 14 kwietnia 2017 przez Daniel Kudyba Obywatel (1,260 p.)
Dokładnie tak :)
komentarz 14 kwietnia 2017 przez Wesoły Pan Rekin Początkujący (440 p.)
edycja 14 kwietnia 2017 przez Wesoły Pan Rekin

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');
  }
});
komentarz 14 kwietnia 2017 przez Wesoły Pan Rekin Początkujący (440 p.)

Rozwiązanie z toggle ;) 

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

 

Podobne pytania

0 głosów
1 odpowiedź 197 wizyt
0 głosów
2 odpowiedzi 842 wizyt
pytanie zadane 18 lipca 2015 w HTML i CSS przez niezalogowany
0 głosów
1 odpowiedź 259 wizyt

92,453 zapytań

141,262 odpowiedzi

319,086 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...