hasClass + addClass funktioniert nicht

Question

Das folgende Skript soll eine Klasse (.active) zu .global-header hinzufügen, wenn .navigation.primary eine Klasse von .active hat, aber es scheint nicht zu funktionieren?

JS

if($(".navigation.primary").hasClass("active")) { 
    $('.global-header').addClass('active'); 
} 

HTML

<header class="global-header"> 
    <div class="site-navigation"> 
     <div class="left-menu"></div> 
     <div class="right-menu"></div> 
    </div> 
</header> 

<nav class="navigation primary">Menu</nav> 

Answer 1

Basierend auf den Kommentaren, wenn Sie die Seite laden, wenn das Element mit navigation.primary keine active Klasse hat, aber später, wenn eine Aktion die active erhalten geschieht Dann müssen Sie dem Ereignis den Ereignis-Listener für Ihren Code hinzufügen, der den Klassenzusatz auslöst.

Wenn die navigation.primary die active wenn Seite geladen hat, müssen Sie Dokument hinzufügen bereit:

$(function() { //when document is ready 
    if($(".navigation.primary").hasClass("active")) { 
     $('.global-header').addClass('active'); 
    } 
}); 

oder wenn ein Ereignis eintritt, zum Beispiel bewegen Sie das Fenster:

$(function() { //when document is ready 
    $(window).on('scroll', function() { //When scrolling 
     if($(".navigation.primary").hasClass("active")) { 
      $('.global-header').addClass('active'); 
     } 
    }); 
}); 

Answer 2

Ihr .navigation.primary keine aktive Klasse. Normalerweise würde $(".navigation.primary").hasClass("active") zu false ausgewertet werden.

<nav class="navigation primary">Menu</nav> 

sollte sein:

<nav class="navigation primary active">Menu</nav>