html - Zurb Foundation 6 视口(viewport)高度结束时的粘性开关状态 ".is-anchored .is-at-bottom"

Question

尝试创建一个始终固定在网站顶部的菜单。遵循 zurb.foundation 的文档，但 .sticky 的行为总是出乎意料。或者也许我没有得到一些明显的信息？

请在此处检查重建: http://codepen.io/mister-hansen/pen/wMgrPm

如果网站向下滚动，并恰好达到初始视口(viewport)的高度，粘性插件会将元素 .sticky 从 is-stuck is-at-top 更改为: .is-anchored .is-at-bottom 所以 .sticky 消失了。

谢谢。

更新文档的第一部分:foundation.zurb.com/sites/docs/sticky.html 解释了所描述的行为。由于默认 body { height: 100% } css，正文被完全解释为最大。视口(viewport)高度。

所以在我的例子中，解决方案是 a) 用自动覆盖 body 的高度。但更好的是 b) 避免对预期的固定 header 使用粘性功能。

Answer 1

我将 data-check-every 插件选项设置为 0 以重新计算每个滚动事件。现在，当动态加载内容时(例如使用无限滚动时)，会再次计算视口(viewport)的高度。