I know I’ve seen this on other sites, but I can’t find an example right now, so I will try and explain it. I was hoping someone on here knows exactly what its called or possibly even has a snippet (using jQuery) available to help me out with it.
What I’m looking for is the ability to make an element positioned as “fixed” inside of a parent container. By default the element would start at top: 0 inside of the container, but as the user scrolls, it would scroll with the user (either staying at the top of their window or a predefined padding/offset). The static element would never break out of the parent container, so if the user scrolled too far below, the fixed element would stop at the bottom of the parent and if the user scrolled above the parent element, the fixed element would stop at the top of the parent.
Thanks in advance.
You would start by having the element positioned with absolute positioning, using the container as the relative reference for the element.
Then, you use a timed interval to look for when the element comes within the offset from the top of the screen, and you change the element to use fixed positioning instead.
Finally, you use the same timed interval to check if the element is within a certain offset from the bottom of the container. When it is, set the elements position to absolute again.
Question: What sorts of screen height and element height are likely to cause confusion for the script?
The positioned element will be approx. 275px tall where the parent element would be at least 600px tall. The page itself is rather long (think Amazon product page almost), so the boundaries are important.
I’m sorry, I think there’s a misunderstanding here - I won’t be building the script for you.
I, like many others around here, are fully willing to help you resolve any issues that you may have with your own efforts.
Thanks. I didn’t intend to have any build the script for me, I was just looking for ideas on how to solve this. JavaScript is not my forte by any means, so I was just hoping there was a tutorial or something that had some actual code to go with it to get me a head start.
Oh yes, there are plenty of tutorials and examples. Take the first link from javascript fixed menu for example
Thanks. I think I found one that looks exactly like what I want: http://plugins.jquery.com/project/stickyfloat