Menu
In the snippet given below element with position sticky does not sticks to the end of the page.
body {
margin: 0;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}<!DOCTYPE html>
<html>
<body>
<div class="sticky">I am sticky!</div>
<div style="margin-bottom:2000px;
border:2px solid black ;">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>but when you add a border to the body , position sticky works fine.
body {margin:0;
border:5px solid red;}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}<!DOCTYPE html>
<html>
<body>
<div class="sticky">I am sticky!</div>
<div style="margin-bottom:2000px;
border:2px solid black ;">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>I have 2 questions .
in first snippet why did element with position sticky did not stick to the end of the page just like in second snippet?
why did element with position sticky started sticking all the way to the end of the page in second snippet when i added a border in body element ?
560
That can happen for many reasons: Position sticky will most probably not work if overflow is set to hidden, scroll, or auto on any of the parents of the element. Position sticky may not work correctly if any parent element has a set height. Many browsers still do not support sticky positioning.
If you really want position: sticky to work on all modern browsers, then you should consider not using overflow: hidden on the <body> or any wrapper surrounding the main content, but rather put a wrapper around elements that will overflow the viewport. Then, those wrappers should use overflow: hidden.
It is available on Chrome (yay), Firefox and Safari. Here are more details about position:sticky : Specification.
The scrollable element needs to be of type inline e.g. inline, inline-block, inline-flex or inline-grid:
It's quite interesting behaviour you have discovered though - somehow adding a border completely changes the height of the element so that it's full height instead of just fitting the content. That part I can't explain only the normal solution of using an inline element to make it full height 🤔
body {
margin: 0;
display: inline-block;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}<!DOCTYPE html>
<html>
<body>
<div class="sticky">I am sticky!</div>
<div style="margin-bottom:2000px;
border:2px solid black ;">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>This documentation really explains why this issue happens
These are the points which i understood
In your case , the ancestor element is no other than body
Body element's height and width are set as autoby default
Once when you added a paragraph , the 'body's height is adjusted to it's height(say 110vh)
Which will let your sticky element to stick till 110vh
Even when you add margin-bottom of 200vh to a div , this will never change the height of body it still remains 110vh (why right ? answer below).
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.
In your case,since the parent body doesn't has no border ,mannual height ,... which resulted your division margin of 2000px to go outside the body
Conclusion :
I have commented some css attributes you can add on the parent to avoid margin collision.
body {
/*border :1px solid transparent;*/
/*display:inline-block;*/
/*padding :1px;*/
float:left;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}<!DOCTYPE html>
<html>
<body >
<div class="sticky">I am sticky!</div>
<div style="margin-bottom:2000px;
border:2px solid black ; background:#aaa;">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>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
