粘性元素在元素底部使用顶部？

Question

我在滚动容器中有两个（可变高度）堆叠元素。

当底部容器位于容器底部下方时，我要显示其一部分粘在底部。

因此，我具有元素position: sticky并将其从顶部定位为calc(100%-2em) ，这应将其放置在元素底部上方2em处。

如果位置为absolute ，则它的位置符合预期。 但是有了position: sticky与我想要的相反，仅在滚动到应有的位置时才粘性。

 #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> 

Answer 1

jQuery可能是您的解决方案。 看下面的示例，如果用户在#top div上滚动，它将显示#bottom div。

更改如下：

1. 添加了一个div， #placeholder时其高度与#bottom div相同的#bottom用于检测#bottom div应该显示的位置
2. 添加了jQuery函数

解释jQuery代码：

• jQuery(window).scroll使代码在用户滚动时运行。
• $(window).scrollTop()获取当前滚动位置， $( window ).height()部分使“检测器行”位于窗口底部。 -32是因为#bottom div的高度为2em，等于#bottom 。
• x是存储#bottom div何时显示（滚动位置）的变量

 x = $("#placeholder").offset().top jQuery(window).scroll(function(){ if ($(window).scrollTop() + $( window ).height() - 32 > x) { x = $("#bottom").offset().top $("#bottom").css({"position": "initial"}); $("#placeholder").css({"display":"none"}); } else { $("#bottom").css({"position": "fixed"}); $("#placeholder").css({"display":"block"}); } }); 

 #bottom { background: red; position: fixed; top: calc(100% - 2em); } #placeholder { height: calc(2em); width: 100%; display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div class="data" style="position: fixed; top: 0;"></div> <div id="hide">123</div> <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>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>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="placeholder"></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>