How to make a div stick to the top and then unstick when page scrolls to a specific scroll

Question

I am creating a website for myself and I am looking for a div#stickydiv to stick to the top when the div#stickydiv hits the top, but when the div#finish reaches the top I want the div#stickydiv to then unstick.

Could someone please help me achieve this :)

Thanks

Take a look at some plugins that deal with the "viewport". That's the term for area currently being displayed on the monitor. — Lix, Apr 21 '13 at 21:32
Take a look @ http://www.webgeekly.com/tutorials/jquery/a-simple-guide-to-making-a-div-static-as-you-scroll-past-it/ — MagePal Extensions, Apr 21 '13 at 22:23
I answered a similar question recently with the following demo: http://jsfiddle.net/Marcel/e9hyw/ — Marcel, Apr 21 '13 at 22:40

score 1 · Accepted Answer · answered Apr 21 '13 at 21:32

1

There is certainly more than one way to skin this cat (figuratively speaking, of course ;) ). My recommendation would be to use jQuery + one of the plugins, such as this one:

http://viget.com/inspire/jquery-stick-em

answered Apr 21 '13 at 21:32

Томица Кораћ

2,542
7
35
57

score -1 · Answer 2 · edited May 23 '17 at 11:57

-1

You might check out this question, which is trying to achieve something similar (though they're manipulating opacity and not "stickiness"):

Div opacity based on scrollbar position

edited May 23 '17 at 11:57

Community

1
1

answered Apr 21 '13 at 21:57

Dylan R

213
3
11

How to make a div stick to the top and then unstick when page scrolls to a specific scroll

2 Answers2