Using jQuery scroll function

Question

I am trying to add a class .red to #box-1 on scroll down using following code at this demo.

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

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

    }
});

the HTML:

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

and 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;}

But it is not working! What am I doing wrong?

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

webkit
– webkit

2015-01-11 11:59:41 +00:00
Commented Jan 11, 2015 at 11:59 — webkit
– webkit, Commented Jan 11, 2015 at 11:59
use !important; is bad practice...

Oleksandr T.
– Oleksandr T.

2015-01-11 12:03:40 +00:00
Commented Jan 11, 2015 at 12:03 — Oleksandr T.
– Oleksandr T., Commented Jan 11, 2015 at 12:03

bluefog · Accepted Answer · 2015-01-11 12:04:23Z

1

Adding !important to the background-color of the red class does the trick.

ids identify elements. classes classify elements. ids have higher specificity and so their styles have higher precedence.

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

See fiddle : http://jsfiddle.net/2v9fn1np/1/

Using !important is bad practice and usually an indicator that you have not utilized classes and ids effectively. In this case, to add the style, you can edit the style attribute of the element directly and achieve the highest precedence. Use jQuery's css method.

answered Jan 11, 2015 at 12:04

bluefog

1,91426 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kup · Accepted Answer · 2015-01-11 12:16:20Z

0

If you haven't noticed, the is getting the CLASS "red". The problem is that you've referred to it's ID has having a yellow background. And since the ID is predominante over a CLASS, you must add it to the CLASS, EX:

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

answered Jan 11, 2015 at 12:16

Kup

87417 silver badges32 bronze badges

Collectives™ on Stack Overflow

Using jQuery scroll function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related