使用 Waypoints 定位多个固定的粘性元素

Question

我正在使用 Waypoints and their Sticky 快捷方式将 ID 为 stick-this 的元素 'stick' 滚动到视口顶部后。但是，我在将元素过去定位到屏幕上的另一个固定元素时遇到了一些困难。

有一个 <div> 和一个 class .header 始终保持固定。我正在尝试将新元素的 top 定位到 .header 元素的 height() 上，以便它们 'stacked' 彼此重叠并且都可见。这是我用来完成此操作的代码：

var sticky = new Waypoint.Sticky({
    element: $('#stick-this')[0],
    handler: function() {
        $(".stuck").css({ "top" : $(".header").height() });
    }
})

所以，从本质上讲，一旦 #stick-this 滚动过去，它就会粘在 position:fixed class 上，而 top 由 [=18 动态确定=] .header.

在我向上滚动之前效果很好，并且 top 样式仍然应用于此元素，尽管 stuck class 不再应用。

所以当我滚动过去时，元素最终变成这样

<div id="stick-this" class="stuck" style="top:70px /*or whatever the height() ends up being */">

当我向上滚动时，元素最终变成这样，顶部属性仍然存在

<div id="stick-this" class="" style="top:70px /*I need this back to 0px */">

是否可以在删除 "sticky" 时调用一个函数，以便将内联样式属性设置为 top:0px 或类似的样式？

Answer 1

对于其他为此苦苦挣扎的人，我最终在粘性元素的 class 启动时动态写入 CSS 并将其插入头部：

var sticky = new Waypoint.Sticky({
        element: $('#stick-this')[0],
        offset: $('.header').outerHeight(true),
        handler: function(direction) {
            $("<style>")
            .prop("type", "text/css")
            .html("\
            .stuck {\
                position: fixed;\
                top:" + $(".header").height() + "px;\
            }")
            .appendTo("head");
        }
    })

因此，class 将添加正确的 top 定位，一旦 class 被删除，top 属性是固有的回到 0px。

重要的是在该代码的 .html() 部分的每个换行符之后添加 \ 以使其正常工作。

使用 Waypoints 定位多个固定的粘性元素

Positioning multiple fixed sticky elements with Waypoints

jquery-waypoints