いくつかの属性は変更されていませんが、その他のものは

Question

です。スクロールダウン時にヘッダーの不透明度を変更するコードを作成しましたが、スクロールダウンするときに背景色を変更します。理由は分かりませんが、この属性は変更されませんが、他の属性（不透明度や遷移時間など）が変更されます。背景色を変えないのはなぜですか？

それは私のウェブサイト上で正常に動作する理由として、必ずこのサイトへのアップロードではなく時にコード入力のデモが表示エラーがあります：あなたの例では

<script type="text/javascript"> 
 
var headerWrap = $('#header-wrap'); 
 
$(window).scroll(function() { 
 
    headerWrap.addClass('scroll-opacity-change'); 
 
    if($(this).scrollTop() === 0) { 
 
     headerWrap.removeClass('scroll-opacity-change'); 
 
    } 
 
}); 
 
</script>

#header-wrap{ 
 
\t background:#D6ECFF; 
 
\t width:100%; 
 
\t height:auto; 
 
\t border-bottom: 1px solid #CCC; 
 
\t position:fixed; 
 
\t top:0;/* may not be needed but no harm in having */ 
 
\t z-index:100000; 
 
\t /* margin:0 auto; needed? */ 
 
} 
 
.scroll-opacity-change{ 
 
\t opacity:0.7; 
 
\t -webkit-transition-duration: 1.0s; /* Safari */ 
 
    transition-duration: 1.0s; 
 
\t background:#777a7c; 
 
}

Answer 1

CSSプロパティのルールがされています特異性に基づいて適用される。

読む：http://vanseodesign.com/css/css-specificity-inheritance-cascaade/

idはクラスが要素よりも、より具体的であるよりも、より具体的です。

これにIDクラスからのbackgroundプロパティが適用なっているために、あなたはクラスにbackgroundプロパティを作成するいずれかの必要があります！重要（重要性は、特異性よりも優先されます）または＃ヘッダー-wrap.scrollを使用-opacity変更

var headerWrap = $('#header-wrap'); 
 
$(window).scroll(function() { 
 
    headerWrap.addClass('scroll-opacity-change'); 
 
    if($(this).scrollTop() === 0) { 
 
     headerWrap.removeClass('scroll-opacity-change'); 
 
    } 
 
});

#header-wrap{ 
 
\t background:#D6ECFF; 
 
\t width:100%; 
 
\t height:100px;; 
 
\t border-bottom: 1px solid #CCC; 
 
\t position:fixed; 
 
\t top:0;/* may not be needed but no harm in having */ 
 
\t z-index:100000; 
 
\t /* margin:0 auto; needed? */ 
 
} 
 
#header-wrap.scroll-opacity-change{ 
 
\t opacity:0.7; 
 
    background:#000; 
 
\t -webkit-transition-duration: 1.0s; /* Safari */ 
 
    transition-duration: 1.0s; 
 
\t 
 
} 
 

 
body 
 
{ 
 
    height:1200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header-wrap"> 
 
</div>

Answer 2

あなたはspecificity問題を抱えています。 idセレクタはクラスセレクタよりも高い特異性を持ちます。したがって、クラスセレクタに高い特異性を持たせる必要があります。セレクターにIDを追加することでそれを行うことができます。

変更

.scroll-opacity-change{ 

#header-wrap.scroll-opacity-change {