Setting offset in jQuery

Question

I need help with the following, i have a menu that i want to stay fixed when the page scrolls down.The first part of the page is white and then after some 800px all the rest is black background. I want to be able to change the color of the menu to white when the user scrolls into the black section. I know how to change it by adding and removing classes in jQuery, but i am having problems writing code how to detect how many of the page is scrolled. I believe it should be some simple if statement calculating the top offset, but i really cant solve it myself.

Thanks, Mirko

Ruslanas Balčiūnas · Accepted Answer · 2012-01-06 23:20:59Z

1

$(document).scroll(function(){
    if($(document).scrollTop() >= max) {
        // do something
    }
})

answered Jan 6, 2012 at 23:20

Ruslanas Balčiūnas

7,4563 gold badges27 silver badges42 bronze badges

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

Comments

Vigrond · Accepted Answer · 2012-01-06 23:17:22Z

0

$(window).scrollTop() will give you the amount of pixels a user has scrolled.

You should really post some example code if you want some more elaborate assistance.

answered Jan 6, 2012 at 23:17

Vigrond

8,1984 gold badges31 silver badges47 bronze badges

Comments

bricriu · Accepted Answer · 2012-01-06 23:30:25Z

0

You can compare

$("#menu").offset().top

to

$("#blackDiv").offset().top

If the former is larger than the latter, then change the menu color and if not, change it back.

This handles future changes to the layout of your page (i.e. if the black section of the page stops being exactly 800px from the top).

answered Jan 6, 2012 at 23:30

bricriu

2201 silver badge3 bronze badges

Comments

Micah Githens · Accepted Answer · 2012-01-06 23:49:00Z

Here's an example using offset().top as suggested by @bricriu.

HTML:

<div id="menu"> MENU </div>
<div class="darkBackground">
</div>
<div class="lightBackground">
</div>

CSS:

.darkBackground{height:400px; background-color:black;}
.lightBackground{height:400px; background-color:yellow;}
#menu{height:30px; width:100%; position:fixed; background-color:red; top:150px; color:white;}
#menu.darkMenu{background-color:green;}

Javascript:

$(window).scroll(function () { 
    console.log("menu: "+$("#menu").offset().top+" background: "+$(".lightBackground").offset().top);
    if($("#menu").offset().top > $(".lightBackground").offset().top){
        $("#menu").addClass("darkMenu");
    }else{
        $("#menu").removeClass("darkMenu");      
    }
});

In this example the menu toggles from green to red where the background changes from black to yellow.

Collectives™ on Stack Overflow

Setting offset in jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related