当页面滚动到最后时，粘滞按钮保持在内容之下

Question

我需要在窗口滚动到结尾之前实现在同一位置的内容上浮动的按钮，然后粘贴到内容的末尾。

换句话说，元素充当Private Foo As Long Private Bar As Long Private Fizz As Long Private Buzz As Long Option Explicit Public Function GetValueByName(ByVal name As String) As Long With New Scripting.Dictionary 'initialize every time, so the values are always up-to-date .Add "Foo", Foo .Add "Bar", Bar .Add "Fizz", Fizz .Add "Buzz", Buzz GetValueByName = .Item(name) End With End Function 直到达到指定位置。从此职位开始，行为更改为relative。

所以我正在寻找一种方法来做到这一点。或javascript解决方案，如果样式表不可能。

预期结果：

当内容块位于指定位置时：

当它到达终点时，初始位置低于其底边：

Answer 1

对于现代浏览器，您可以使用fixed在到达顶部（或底部）时粘贴。

  

粘性定位是相对定位和固定定位的混合。该元素被视为相对位置，直到它超过指定的阈值，此时它被视为固定位置。

在this MDN article中阅读更多内容。

position: sticky

.sticky-button {
  position: sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  bottom: 10px;
}

支持浏览器（source）：

不幸的是，没有一个明确的规范 - 该功能刚刚登陆Webkit，并且存在一些已知问题。但对于按钮，效果很好

Answer 2

尝试谷歌搜索执行此操作的库。

这个概念很简单，但很难与所有浏览器兼容。

您需要知道：

1.元素的高度：

element.style.height

2.窗口高度：

window.innerHeight

3.window scroll pos：

document.body.scrollTop

那应该是你需要的所有参数。

这是我刚刚提出的一个小提琴：

https://jsfiddle.net/t7j726c1/

同样，我会尝试找一个库来做这件事。