Question

我正在尝试使用This Demo下面的代码向下滚动向.red添加课程#box-1

$(window).scroll(function() {    
    var scroll = jQuery(window).scrollTop();
    if (scroll >= 30) {
        $("#box-1").addClass("red");

    } else {
        $("#box-1").removeClass("red");

    }
});

HTML：

<div id="box-1" class="row"></div>
<div id="box-2" class="row"></div>
<div id="box-3" class="row"></div>

和CSS：

.red{ background-color: red;  }
#box-1{background-color: yellow;   height:300px; width:100px;}
#box-2{background-color: green;   height:300px; width:100px;}
#box-3{background-color: blue;   height:300px; width:100px;}

但它不起作用！你能告诉我我做错了吗？

由于

Answer 1

将!important添加到红色类的background-color就行了。

ID识别元素。类对元素进行分类。 ids具有更高的特异性，因此他们的风格有更高的优先权。

.red{ background-color: red !important; }

请参阅小提琴：http://jsfiddle.net/2v9fn1np/1/

使用!important是不好的做法，通常表明您没有有效地使用类和ID。在这种情况下，要添加样式，您可以直接编辑元素的样式属性并获得最高优先级。使用jQuery的css方法。

Answer 2

如果你没有注意到，那就是CLASS为“红色”。问题是你提到它的ID有黄色背景。由于ID优于CLASS，因此必须将其添加到CLASS，EX：

#box-1.red{ background-color: red; }

关于使用jQuery Scroll函数的问题

2 个答案: