I have a sidebar that I want to behave like it's frozen on the right side of the pane even when the scroll bar moves the down to see more content. I gave up on it being perfectly fixed and handled it by the sidebar scrolling down with the page using jQuery. Currently this is how I'm handling this.
I have a 100% wide header and footer on my page so the top of the sidebar is offset by about 150px from the top, when users have small viewports when they scroll entirely to the bottom the bar will end up going under my footer or if it's a really small view port entirely off the screen.
Would there be an easy way to calculate what to set top at, to have it stop approximately 200px from the bottom of the viewport so it doesn't crash through the footer??
The real answer to my question is that I was looking for the offset() function inside jQuery. I wrote a blog post on this: Using jQuery to create a scrolling sidebar.
Have you tried
position: fixed;? This absolutely positions the box within the browser viewport, meaning it will always remain in the screen (this SOUNDS like what you are after).
As far as your issue, would some margin on the bottom of the element help?
hey I just implemented what you're looking for, you can check the code for reference.
and the js
what i do is capture the scroll event then check if the $(window).scrollTop() value it's greater than the element offset().top, if so I animate it to current scrollTop() plus his antecessors size.