javascript - 有些属性没有改变，但其他的是

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

Answer 1

在您的示例中，css 属性规则是根据特异性应用的。

阅读:http://vanseodesign.com/css/css-specificity-inheritance-cascaade/

id 比 class 比 element 更具体。

由于这个来自 id 类的背景属性被应用，你将不得不在类 !important 中创建背景属性(重要性优先于特异性)或使用 # header-wrap.scroll-opacity-change

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

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

body
{
  height:1200px;
}

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