Menu
If, for example, I have a menu using fixed positioning but it's larger than the height of the current window, is there a way to allow this to scroll? The browser's default behaviour is to just hide it, and not let you access it.
div#sidebar { position:fixed; top:30px; left:0; bottom:4px; width:148px; background-color:#d7d7d7; } Here's a snippet of what I've currently got. Would it require some JavaScript or something along those lines?
EDIT: I'm not sure if this is actually possible to get correct. I want an element which is 30 pixels from the top of the document. I want to allow this to scroll using overflow:auto and height:100%. Either way I seem to do it, the scrollbar will be hidden, or a portion of the div will be hidden.
261
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
An element with position:fixed is fixed with respect to the viewport. It stays where it is, even if the document is scrolled.
To make div fixed scrolling to that div with CSS, we can use the position: sticky CSS property. position: -webkit-sticky; position: sticky; top: 0; z-index: 1; to set position to sticky and z-index to 1 to make the element with the sticky position show on top after we scroll to it.
You'll need to set overflow:scroll (or overflow:auto) to that div, and set height to 100%.
154
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
