使用JQuery Sticky Elements

Question

我正试图反过来做经典的粘性元素。

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

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

Answer 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。

Answer 2

您可以通过为bottom : 0px班级选择器

设置.top来更改css以使其与屏幕底部齐平

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

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