Question

I’m trying to find out more information about an element that scrolls within a page as the page is scrolled and has an upper and lower bound.

Specifically, I am trying to add functionality that scrolls my secondary content section (sidebar) within the bounds of my header and footer as the page scrolls.

As an example, Apple uses it in there store when selecting product features to include – http://store.apple.com/us/configure/MD093LL/A.

I am able to recreate this functionality, but I’m betting I could find code that has been more thoroughly tested, cross-browser compliant, etc. with stackoverflow’s help.

Ideally, I would hope to find something that functions on it’s own and not as a part of a much larger library like jQuery. This is just a preference, but I’m open to potential solutions that include a jQuery-type library…

Answer 1

You just need CSS, position: fixed:

body
{
    margin-top: 150px; /* header height */
    margin-bottom: 250px; /* footer height */
}
.header, .footer
{
    position: fixed;
    left: 0;
    right: 0;
}
.header
{
    top: 0;
}
.footer
{
    bottom: 0;
}

This works in all relevant desktop browsers. It doesn’t work in IE6, which is all but extinct, nor will it work in any mobile browser. In fact, you should use a media query to override these styles for mobile browsers. Something like this might work:

@media screen and (max-device-width: 500px)
{
    body
    {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .header, .footer
    {
        position: static;  /* or maybe relative */
    }
}