Nach Javascript Addclass fügt es Klasse aber CSS-Eigenschaft nicht funktioniert

Question

Kann mir bitte jemand helfen? Meine Webseite ist: http://etinklapis.lt/

Hier .header-line nach scroll hat eine zusätzliche Klasse von .header-line .active aber css kann es nicht sehen und ändert nicht die Hintergrundfarbe. Sie können meine CSS sehen und dort .header-line .active ist mit Hintergrundfarbe Eigenschaft. Warum ist mein Hintergrund immer noch transparent?

CSS:

.header-line { 
    width: 100%; 
    height: 60px; 
    background-color: rgba(255,255,255,0.00); 
} 
.header-line .active { 
    background-color: white; 
} 

Header:

<div class="header-line">header</div> 

Javascript:

$(function() { 
    $(window).on("scroll", function() { 
    if($(window).scrollTop() > 50) { 
     $(".header-line").addClass("active"); 
    } else { 
     //remove the background property so it comes transparent again (defined in your css) 
     $(".header-line").removeClass("active"); 
    } 
    }); 
}); 

Answer 1

Das liegt daran, dass in Ihrem CSS-Datei, die Sie .header-line .active { ... } haben, und das bedeutet .active Klasse innerhalb .header-line Klasse .

Sie sollten das zu .headerline.active { ... } ändern (den Raum entfernen)

Answer 2

Deklarieren Sie die CSS wie dies in Ihrem bootstarp.css

.header-line.active { 
background-color: white; 
}