使用JQuery Sticky Elements [英] Using JQuery Sticky Elements

问题描述

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

I'm trying to do the classic Sticky Element in reverse.

参见 http://imakewebthings.com/jquery-waypoints/sticky-elements/ 获取典型粘性体验的示例。

See http://imakewebthings.com/jquery-waypoints/sticky-elements/ for an example of a typical sticky experience.

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

What I want to do instead, is to have an element that initially docks flush with the bottom of the users window, and then stops and docks on the footer when he scrolls down that far. Is there a better way to initialize this plugin, or use another to accomplish this?

推荐答案

在文档，可以通过以下方式实现：

Following the documentation, it can be achieved as follows:

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

我指定 .sticky 最初的＃footer-content （在html中）。

I assign .sticky to #footer-content initially (in the html).

请参阅小提琴。

这篇关于使用JQuery Sticky Elements的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！