div that sticks to the top when you scroll past it in jquery

Question

For example...the new facebook activity stream on the right. Or on okay cupid (the message/rating dialogue).

How does this work exactly. Can someone point me to a tutorial or explanation?

Thanks!

John Hartsock · Accepted Answer · 2011-09-21 19:24:02Z

4

There are many ways to do this but here is one using CSS only

<div style="position:fixed; left:0; top:0; height:100px; width:100%">Stuck to Top</div>

Here is a fiddle

http://jsfiddle.net/2kmQe/

answered Sep 21, 2011 at 19:24

John Hartsock

87.1k23 gold badges135 silver badges146 bronze badges

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

2 Comments

goddamnyouryan Over a year ago

hmm, this seems to be basically fixed positioning. I want it so that the element is placed in the page normally, and only "sticks" to the top when you scroll past it, if that makes sense.

John Hartsock Over a year ago

@weckersham ... sorry about that but you may want to repost the new details to your question for others to see and assist with.

golf · Accepted Answer · 2011-09-23 18:07:30Z

Add some Javascript to set position: fixed; top: 0px; when $(window).scrollTop() reaches the $("#element_id").offset().top.

Google does a similar thing with their new gmail look

Collectives™ on Stack Overflow

div that sticks to the top when you scroll past it in jquery

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related