Question

我在滚动时创建了更改标题不透明度的代码，但我希望它在向下滚动时更改背景颜色。不确定原因，但它不会更改此属性，但会更改其他属性（如不透明度和转换持续时间）。为什么不改变背景颜色？

代码输入演示在上传到此网站时出现显示错误，但不确定为什么它在我的网站上正常工作：

＆＃13;

ng-reflect-href="/en/test" href="/en/test"

＆＃13;

<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>

＆＃13;

Answer 1

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

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

一个ID比一个类更具体而不是一个元素。

由于这个id类的背景属性正在应用，你必须在类！important 中创建背景属性（重要性优先于特异性）或使用＃首部的wrap.scroll不透明度变化

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>

Answer 2

您遇到specificity问题。 id选择器具有比类选择器高的特异性。所以你需要让类选择器具有更高的特异性。您可以通过将id添加到选择器来实现。

更改

.scroll-opacity-change{

到

#header-wrap.scroll-opacity-change {

有些属性没有改变，但其他属性

2 个答案: