位置相反：粘性

【问题标题】：Opposite of position: sticky位置相反：粘性
【发布时间】：2018-07-13 00:28:11
【问题描述】：

将 css 属性 position 设置为 sticky 会导致元素相对定位，直到某个点也被滚动到该点固定为止。我怎样才能实现相反的效果，即元素是固定的，直到某个点变得相对。

为了展开，假设我有一个大的页脚，高度为 500 像素，最初位于视口之外。我想要一个最初落在页面底部的按钮，但是，如果页脚出现在视图中，那么按钮应该保持在页脚上方。

【问题讨论】：

您好，您可以粘贴您的代码并可能是我们页面的预览
您可以使用Waypoints 来跟踪元素是否在视口内。基本上，它会跟踪元素是否“超过”了视口中的阈值，如果是，它会使用 javascript 应用更改。我之前做过类似的事情，但THIS 仅演示了 Waypoints 的使用，而不是您真正需要的行为。

【解决方案1】：

要使元素在顶部具有粘性，请添加以下内容：

element{
  position:sticky;
  top:0;
}

要使元素在底部具有粘性，您需要将 top:0; 替换为 bottom:0;

element{
  position:sticky;
  bottom:0;
}

【讨论】：

Demo
仍然有一种开箱即用的自然行为：向下滚动到粘性元素时：底部 0：开始固定到屏幕底部，当它到达它的屏幕底部的自然位置，它粘在那里 top 0：开始相对，当它到达屏幕顶部的自然位置时，它粘在那里 ???：相对，当它到达屏幕底部的自然位置时它粘在那里
对不起，但我对为什么这被标记为正确答案感到困惑。问题不是如何让它在达到某个点之前变得粘稠，而不是如何让它变得粘稠？！（！）因为我有同样的问题 - 只是有不同的实际用途。