Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make element fixed position, but follow page scroll if content too big

Tags:

html

css

position

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.

like image 802
Matsemann Avatar asked Jun 06 '12 13:06

Matsemann


People also ask

Why can't I scroll down to see the fixed content?

This will cause the problem that you're seeing, because the non-fixed content is long enough to include the fixed content with 100% height without requiring a scroll bar. The browser doesn't know/care that you can't actually scroll that bar down to see it You can use fixed to accomplish what you're trying to do.

Does overflow scroll the content of a Div?

Yes overflow:auto or overflow-y:scroll or overflow:scroll all don't allow the fixed div to scroll. The reason for scrolling to be needed is if a div has TOO MUCH content in its defined lengths. If the browser view port shrinks that would not cause the div to force a scrolling action anyway.

How to create a fixed/sticky header on scroll?

Learn how to create a fixed/sticky header on scroll with CSS and JavaScript. Scroll down to see the sticky effect. The header will stick to the top when you reach its scroll position. Scroll back up to remove the sticky effect. Some text to enable scrolling..

How to avoid mouse hover while scrolling content in content box?

If the used box is direct child for body and has neighbours, then it makes sense to check z-index and top, left properties, since they could overlap each other, which might affect your mouse hover while scrolling the content. Here is the solution for a content box (a direct child of body tag) which is commonly used along with mobile navigation.


1 Answers

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.. */
    }
}
like image 85
Raekye Avatar answered Oct 20 '22 00:10

Raekye