Change CSS at a certain scroll level via jQuery doesn't work

Question

The following jQuery code:

HTML:
<header class="header">
    <div class="navbar">   
        Hello
    </div>
</header>

CSS:
.header {
        background-color: black;
        height: 1000px;
        width: 300px;
        color: white;
        text-align: center;
        padding: 30px;
    }

.fixed .navbar{
    border: 10px solid red;
    position: fixed;
    background-color: white;
}

.navbar {
    background-color: blue;
    height: 50px;
    width: 300px;
    color: white;
}

JS:
$(window).scroll( function(){
        if($(window).scrollTop() > 200) $("header").addClass("fixed");
        else $("header").removeClass("fixed");    
    });

does work.

But when I add it to my homepage, I have to refresh the page for the "fixed" class to be added. But I want the class to be added live, while scrolling down, without the page having to be refreshed. This works in jsfiddle, why doesnt it work on my page?

My page: Click here

@Aleksandar didn't try it, but it won't change anything. $(window) is defined before the DOM is ready. — Karl-André Gagnon
– Karl-André Gagnon, Commented Jul 24, 2014 at 15:38
Checking the console on your page gives the error: "undefined is not a function" on line 34 of index, which is the following line: if($(window).scrollTop() > 50) $("header").addClass("fixed"); — MisterBla
– MisterBla, Commented Jul 24, 2014 at 15:39
Your $ symbole is beign overriden. Use jQuery instead of $ — Karl-André Gagnon
– Karl-André Gagnon, Commented Jul 24, 2014 at 15:42
@SimonMathewson Try what Karl-Andre said, or wrap it in a self-executing function, passing jQuery as an argument. (function($) { /* Code here */ }(jQuery)) — MisterBla
– MisterBla, Commented Jul 24, 2014 at 15:45

MisterBla · Accepted Answer · 2014-07-24 15:50:56Z

4

As Karl-André said, your $ object is being overwritten. To make your code work you can do either of the following:

Use the jQuery object:

jQuery(window).scroll( function(){
    if(jQuery(window).scrollTop() > 200) jQuery("header").addClass("fixed");
    else jQuery("header").removeClass("fixed");    
});

Or wrap everything in a self-executing function, passing the jQuery object as an argument:

(function($)
{
    $(window).scroll( function(){
        if($(window).scrollTop() > 200) $("header").addClass("fixed");
        else $("header").removeClass("fixed");    
    });
}(jQuery))

answered Jul 24, 2014 at 15:50

MisterBla

2,3951 gold badge20 silver badges29 bronze badges

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

Comments

Shauno · Accepted Answer · 2014-07-24 15:43:10Z

1

Try using

$(function() {
    $(window).on('scroll', function(){
        if($(this).scrollTop() > 200) $("header").addClass("fixed");
        else $("header").removeClass("fixed");    
    });
});

http://jsfiddle.net/c9aXS/2/

answered Jul 24, 2014 at 15:43

Shauno

1,2581 gold badge11 silver badges19 bronze badges

1 Comment

MisterBla Over a year ago

Look at the comments of the OP.

Collectives™ on Stack Overflow

Change CSS at a certain scroll level via jQuery doesn't work

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related