See this webpage.
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.
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.
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.
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..
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.
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.. */
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With