stick element to top of page until next element of that type appears

Posted by aharon on Stack Overflow See other posts from Stack Overflow or by aharon
Published on 2011-01-17T00:20:33Z Indexed on 2011/01/17 0:53 UTC
Read the original article Hit count: 203

Filed under:
|
|
|
|

I'm having a hard time giving a good description of this, but bear with me:

If I have a page structed like this

<h2>Chapter 1</h2>
<p>Lots of text that has mutiple screen worths of content</p>
<h2>Chapter 2</h2>
<p>Lots of text...</p>

I'd like to have "Chapter 1" absolutely positioned or whatever at the top of the page until the user scrolls down to where "Chapter 2" starts, at which point now "Chapter 2" is displayed at the top of the page.

We can add wrapper classes and divs if needed. Solutions that use JQuery would be great.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery