Изменить заголовок фона на прокрутке

Question

Я пытаюсь изменить заголовок фона на странице прокрутки.

Я пользуюсь приведенным ниже кодом. JS работает, при прокрутке более 100 пикселей я вижу, что класс .not-transparent добавлен к элементу в HMTL. Проблема в том, что этот класс не будет впоследствии вызываться в CSS.

Вот HTML:

<header> 
    <div id="logo">logo</div> 
    <div id="nav-wrapper"> 
     <nav> 
      nav 
     </nav> 
    </div> 
    <div class="clear"></div> 
</header> 
<script> 
$(window).on("scroll", function() { 
    if ($(this).scrollTop() > 100) { 
     $("header").addClass("not-transparent"); 
    } 
    else { 
     $("header").removeClass("not-transparent"); 
    } 
}); 
</script> 

Вот CSS

header { 
    width:100%; 
    position:fixed; 
    top:0px; 
    z-index:3; 
} 
header.not-transparent { 
    background: #252525;  
} 

Answer 1

Вы также можете использовать CSS свойство для него, как.

<script> 
$(window).on("scroll", function() { 
    if ($(this).scrollTop() > 100) { 
     $("header").css("background","#252525"); 
    } 
    else { 
     $("header").css("background","#fff"); 
    } 
}); 
</script> 

Убедитесь, что ваш дочерний div-фон установлен на прозрачный, чтобы вы могли видеть исходный фон div.