How can I keep a fixed element contained inside a relative element?

Question

I have a fixed element (div) that I want to scroll with my page. However, when the fixed element reaches the end of the container (div) I want it to stop scrolling with the page.

I'm trying to do this with CSS, or is jquery my best option?

Answer 1

Elements with position:fixed are positioned relative to the body, not the containing element. You probably won't be able to do this without using JavaScript.

Answer 2

You could add an event with $(window).scroll() and compare the position of the div container and the fixed element.

When they are equal switch the position style from fixed to absolute and set left and top accordingly. When the user scolls back, do the opposite.