Question

我试图添加仅在进入视口时才停留在页面底部的粘性元素。想法是将元素放置在页面中间的某个位置，并且当用户访问页面时不会立即显示。

到目前为止，这是我的进度： https://jsfiddle.net/wedgth4x/

问题是我的代码执行的操作与我想要的相反。该元素应仅超出其原始位置。

这是我的粘性元素的CSS：

.sticky {
 position: -webkit-sticky;
 position: sticky;
 bottom: 0;
 height: 30px;
 width: 100vw;
 background: yellow;
}

在台式机上将bottom: 0更改为top: calc(100vh - 30px)似乎很好，但是我注意到这不足以在iOS上使用Safari。使用这种“被黑客入侵”的解决方案，每当用户向上滚动时，底部栏的大小就会增加，并迫使粘性元素跳转。

Answer 1

只是粘性如何起作用，不会以相同的方式对待底部和顶部。这是一种使它工作的简单方法。

//

.sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  height: 30px;
  width: 100vw;
  background: yellow;
}

<div>

<div style="height: 300px; background: red;">Scroll</div>
<div style="height: 300px; background: orange;"></div>
</div>

<div>

<div style="height: 300px; background: green;"></div>
<div style="height: 300px; background: blue;"></div>
<div class="sticky">Sticky Section</div>
</div>

使用我所做的事情，即当滚动父元素并停止将其放置在html中的位置时，粘性将立即显示。所以我将颜色框分成两个不同的容器。

拆分发生在您希望元素随后开始发粘的位置，而停止发生在页面/父元素的末尾。不知道它是否可以很好地解决现实问题，但这是我唯一可以使用的方法。

CSS：进入视口时，将其粘在底部

1 个答案: