javascript - 使用 jQuery 滚动功能

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 就可以了。

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

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

参见 fiddle :http://jsfiddle.net/2v9fn1np/1/

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