How can I keep this jQuery scroll event from firing constantly?

Question

I'd like a navigation bar to stick (position:fixed) when it hits the top of the window. But I also want the element to go back to normal positioning if the user scrolls back up.

The following code makes the element stick, but as you scroll, the event keeps firing, causing the element to flash in and out. If I remove the 'else removeClass()', it's smooth (and stops flashing) but the element stays fixed after I scroll back up to the top. Thoughts?

Relevant CSS:

.fixed-object { width:100%; background-color:tomato; } .stick { position:fixed; top:0; }

jQuery:

 $(window).scroll(function(){ var elementDepth = $('.fixed-object').offset().top; var scrollDepth = $(window).scrollTop(); if (scrollDepth >= elementDepth) { $('.fixed-object').addClass('stick'); } else { $('.fixed-object').removeClass('stick'); } });

till you make one , check this stackoverflow.com/questions/20486131/… — ProllyGeek
– ProllyGeek, Commented Dec 11, 2013 at 4:18
so from what i get if user scrolls to bottom the nav bar should have top:0 , and fixed position , else just keep it as last seen !! right ? — ProllyGeek
– ProllyGeek, Commented Dec 11, 2013 at 4:20
here's a fiddle. I commented out @arun's solution, but both are there. Neither of them are flashing like they were for me locally, but neither are returning the element to its original height either. jsfiddle.net/B6mPn — Bryce Johnson
– Bryce Johnson, Commented Dec 11, 2013 at 4:31

animuson · Accepted Answer · 2014-01-27 01:40:51Z

2

Make it as simple.....

Declare the elementDepth as GLOBAL variable... it will work

var elementDepth = $('.fixed-object').offset().top; $(window).scroll(function(){ var scrollDepth = $(window).scrollTop(); if (scrollDepth >= elementDepth) { $('.fixed-object').addClass('stick'); } else { $('.fixed-object').removeClass('stick'); } });

Live Demo

edited Jan 27, 2014 at 1:40

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

answered Dec 11, 2013 at 4:27

rynhe

2,5291 gold badge22 silver badges27 bronze badges

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

2 Comments

Bryce Johnson Over a year ago

bingo! why does that work, if you don't mind? --just curious :)

lassombra Over a year ago

elementDepth was being recalculated everytime you scroll. If there was any "jitter" in the reported values from the browser, voila, flickering element. Using it as a global caused it to be calculated once and such no "jitter" can get in.

Collectives™ on Stack Overflow

How can I keep this jQuery scroll event from firing constantly?

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related