После javascript addclass добавляет класс, но свойство css не работает

Question

Может ли кто-нибудь мне помочь? Моя веб-страница: http://etinklapis.lt/

Здесь .header-line после прокрутки имеет дополнительный класс .header-line. Active, но css не видит его и не меняет фоновый цвет. Вы можете увидеть мой css, и там .header-line .active имеет свойство background-color. Почему мой фон все еще прозрачен?

CSS:

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

Заголовок:

<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

Это потому, что в вашем файле CSS у вас есть .header-line .active { ... }, и это означает, что .active класс внутри .header-line класс ,

Вы должны изменить что .headerline.active { ... } (убрать пробел)

Answer 2

Объявите CSS, как это в вашем bootstarp.css

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