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.

<script type="text/javascript">
$(window).scroll(function() {
    $('#sidebarPage1').animate({ top: $(window).scrollTop() + 'px' }, { queue: false, duration: 500, easing: 'easeInOutSine' });

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??

3 answers

This was chosen as the best answer

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.

Answered about 10 years ago by Chris Marisic

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?

Answered about 10 years ago by Ben Shoults
  • I had no luck at all with the Fixed layout and then it gets into all the issues of it's not supported in browsers. Margin probably wouldn't help but I'll check that tomorrow since it's basing it off the top position and it pushes under the page I don't think the margin will bother it. Chris Marisic about 10 years ago
  • Do you have any feedback for Thiago's response and my comment on it? Chris Marisic about 10 years ago

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.

Answered about 10 years ago by Thiago Cruz
  • I think this is close to the right track but if you look at your page, shrink your browser window so it's like 100-200px tall and then scroll to the bottom of the item list and you'll see your box goes under your footer just like my question is about. So the calculation needs to figure out based off the bottom of the page to stop scrolling when it ScrollTop is something like AbsoluteLengthPage - FooterHeight - BoxHeight - 50px (buffer space) but I'm not sure what element I need to check for the total height part. Chris Marisic about 10 years ago
  • Any suggestions? Chris Marisic about 10 years ago