Question

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

当底部位于容器底部下方时，我想显示它的一部分粘在底部。

所以我有元素position: sticky并将它从顶部定位为calc(100%-2em)，它应该将它放在元素底部的2em之上。

如果位置为absolute，则按预期定位。但是position: sticky它与我想要的相反，只有在滚动到应有的位置时它才会粘住。

＆＃13;

#container {
  width: 500px; height: 100px; background: black; margin: 2em auto; color: white; overflow-y: scroll;
}

#bottom {
  background: red;
  position: sticky;
  top: calc(100% - 2em);
}

＆＃13;

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

＆＃13;

Answer 1

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

以下是更改：

在隐藏时添加了与#placeholder div相同高度的div #bottom，用于检测#bottom div应显示的位置
添加了jQuery函数

解释jQuery代码：

jQuery(window).scroll就会运行代码。
$(window).scrollTop()获取当前滚动位置，$( window ).height()部分在窗口底部生成“检测器线”。 -32是因为#bottom div的高度为2em，等于32px。
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>

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

1 个答案: