Menu
I was wondering why position: sticky works for some x-axis-scrolling, but once you scroll past the initial width of the screen width, your 'sticky div', stops sticking.
In this example, I have a left-side-bar that sticks to the left (please note that I cannot use position: fixed or position: absolute, because in my actual project both the left-div and the right-div need to scroll up and down along the y-axis, hence we only want left-side-sticking)
is there an additional CSS parameter I can define, such as
left-sticky-distance=999999%
or something like that?
some test code illustrating is below
<html>
<body>
<div style='
position:sticky;
z-index:1;
left:0;
width:100px;
height:200px;
overflow: hidden;
background-color:#ff0000;
opacity:0.8;'
>
</div>
<div style='position: absolute; top: 10; left: 10; width: 200; height:50px; background-color: blue'>B</div>
<div style='position: absolute; top: 10; left: 110; width: 200; height:50px; background-color: blue'>C</div>
<div style='position: absolute; top: 10; left: 210; width: 200; height:50px; background-color: blue'>D</div>
</body>
<html>
450
Sticky Element Has Parent(s) with overflow PropertyIf the sticky element has a parent or ancestor with overflow: hidden , overflow: auto , or overflow: scroll , then position: sticky will not work properly.
If the parent element has no height set then the sticky element won't have any area to stick to when scrolling. This happens because the sticky element is meant to stick/scroll within the height of a container.
You apply position: sticky; to an element along with a top , left , right , or bottom threshold and it will “stick” in that position when the threshold is passed, as long as there is room to move within the parent container.
Position Sticky is supported by all major modern browsers, except for old IE. For Safari browsers you will need to add the -webkit prefix.
After I add the height: auto; into body's CSS attributes as below, this auto-hiding problem is fixed.
body {
background: #fff;
color: #444;
font-family: "Open Sans", sans-serif;
height: auto;
}
Hope it will be helpful to you. :)
177
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
