使用 JQuery 粘性元素答案

【问题标题】：Using JQuery Sticky Elements使用 JQuery 粘性元素
【发布时间】：2012-03-06 18:59:09
【问题描述】：

我正在尝试反向执行经典的粘性元素。

请参阅http://imakewebthings.com/jquery-waypoints/sticky-elements/，了解典型的粘性体验示例。

我想要做的是让一个元素最初与用户窗口的底部齐平，然后当他向下滚动那么远时停止并停靠在页脚上。有没有更好的方法来初始化这个插件，或者使用另一个来完成这个？

【问题讨论】：

imakewebthings.com/waypoints/shortcuts/sticky-elements 可能是旧链接的更新版本（现在该插件已被重构为不严格依赖 jQuery，尽管 Sticky 快捷方式/扩展似乎确实需要 jQuery 构建）。

标签： javascript jquery html jquery-plugins

【解决方案1】：

按照documentation，可以实现如下：

$('#footer').waypoint(function(event, direction) {
    $('#footer-content').toggleClass('sticky', direction === 'up');
}, {
   offset: function() {
      return $.waypoints('viewportHeight') - $(this).outerHeight();
   }
});

我最初将.sticky 分配给#footer-content（在html 中）。

见fiddle。

【讨论】：

这行得通，直到我到达底部。然后，当我向上滚动时，页脚不再粘住。由于小提琴中使用的库版本已经很旧了，这可能是一个有争议的问题，但是如果其他人正在寻找类似的解决方案，请注意。
这是修复了问题的小提琴的更新版本（并使用了最新版本的库 + Sticky 快捷方式）：jsfiddle.net/jinglesthula/68903kzc

【解决方案2】：

您可以通过为 .top 类选择器设置 bottom : 0px 来更改 css 以使其与屏幕底部齐平

目前该项目实际上是页脚的一部分，因此添加使其在页面的某个点停止滚动并不是一个简单的功能。

我想您必须在 javascript 中设置一个最大滚动高度变量，当您到达该滚动条时，获取元素的偏移量，将其位置更改为绝对位置并将位置设置为您保存的偏移量。如果它们低于最大滚动高度，则将位置更改回固定位置。

【讨论】：