I have two stacking elements of varying heights within a scrolling container.
When the lower element extends below the bottom of the container, I want to display a part of it affixed to the bottom.
To achieve this, I applied position: sticky to position the element at calc(100%-2em) from the top, which theoretically should place it 2em above the bottom of the element.
However, when the position is set to sticky, it behaves contrary to my intention as it only sticks when scrolled to its intended position.
#container {
width: 500px; height: 100px; background: black; margin: 2em auto; color: white; overflow-y: scroll;
}
#bottom {
background: red;
position: sticky;
top: calc(100% - 2em);
}<div id="container">
<div id="top">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin justo sem, egestas eget massa sit amet, volutpat facilisis orci. Aenean tristique pulvinar viverra. Integer dui nunc, sodales id mi vitae, dignissim volutpat nisl. Sed ac tristique ipsum. Nulla quis metus id massa sagittis interdum. Maecenas egestas imperdiet maximus. Etiam vehicula metus sit amet tellus posuere feugiat. Mauris non nisl felis. Suspendisse eu elementum justo. Nulla a semper nisi. Aliquam posuere pulvinar bibendum. Cras eget sem eget nunc rhoncus maximus. In hac habitasse platea dictumst. </p>
<p>Ut suscipit, augue sed eleifend cursus, quam urna tempus turpis, et consequat neque nisl vel magna. Morbi et fringilla est, eget efficitur nulla. Cras nec finibus sapien. Aenean vitae mauris auctor, ornare sapien et, consectetur eros. Nullam maximus eu augue sed blandit. Aliquam ligula sem, pellentesque quis eleifend id, venenatis sit amet nibh. Curabitur aliquam dolor lacus, non sollicitudin nulla gravida nec. Sed diam odio, sodales sed pretium lobortis, accumsan et nulla. Proin nec posuere nibh. Sed ullamcorper neque eu eros sodales tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris et purus purus. Duis in pulvinar tortor. Morbi fringilla elit eget augue aliquet vulputate vel ut felis. Morbi in est suscipit ex consequat lobortis dapibus id augue. Nulla sagittis, erat vitae tincidunt faucibus, nulla nulla fermentum elit, vitae viverra mi augue sit amet tellus. </p>
</div>
<div id="bottom"><h3>bottom</h3>
<p>Phasellus malesuada, ipsum vel ullamcorper elementum, eros leo eleifend nisi, at scelerisque erat lorem id lorem. Mauris vestibulum massa ac bibendum pretium. Cras non tempus nibh, vel finibus tortor. Nulla posuere justo erat, id elementum lectus porttitor in. Nullam leo nibh, dictum ut mauris eget, tristique malesuada nunc. Phasellus vestibulum elit nec ex mollis, sed ultricies est sagittis. Nullam faucibus urna non tortor efficitur, at aliquet sapien dapibus. Aliquam condimentum dapibus neque, imperdiet egestas massa convallis tincidunt. Nam ultrices urna in sem posuere placerat. Praesent sem erat, dignissim et magna sed, luctus cursus lacus. Mauris sed nisi sed est facilisis euismod a quis mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>