Question

See this webpage.

1. First try scroll it, see that the left bar remains fixed.
2. Resize the height of your window, so that not all of the content of the left bar is visible. Now scroll. This time, the left bar is not fixed.

In this page, there is a jquery that calculates height of left bar, compares it to the window-height and then makes the left bar position fixed or absolute.

However, I’m wondering if something similar is achievable through just HTML and CSS, not using jQuery or similar.

Any suggestions?
In short what I’m looking for is a bar with content that remains fixed, but is scrolled if the content overflows. But the scrolling should be together with the whole page.

Answer 1

You can use media queries to direct CSS at certain screen sizes (and other things too) so you could use one stylesheet if the screen is too small. I’m no expert so no examples, but take a look here http://css-tricks.com/css-media-queries/ . Sorry! but guess you figured it out 🙂

Edit: The working result is this:

#leftnav {
    /* default look */
    width: 300px;
    position: fixed;
    top:0;
    height: 100%;
}

/* set the size at which the content is clipped and we cannot have fixed position */
@media all and (max-height: 500px) {
    /* things inside here will only have an effect if the browser window shows
       less than 500 px in the height, so here I apply the special rules */
    #leftnav {
        position: absolute;
        height: auto;
        /* etc.. */
    }
}