使用航点

Question

我使用Waypoints和他们的Sticky快捷方式来“坚持”＃39;一旦滚动过去，视口顶部的标识为stick-this的元素。但是，我很难将元素定位在屏幕上的另一个固定元素

。

<div>有一个.header类，它始终保持不变。我正在尝试将新元素的top定位到height()元素的.header，以便它们被堆叠＆＃39;在彼此的顶部，两者都可见。这是我用来完成此任务的代码：

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

因此，基本上，一旦#stick-this滚动过去，position:fixed类就变得粘滞，top由height()动态确定.header }}

这很有效，直到我向上滚动，top样式仍然应用于此元素，尽管stuck类不再被应用。

所以当我滚动过去时，元素会像这样结束

<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 */">

当＆＃34;粘贴＆＃34;是否可以调用一个函数？被删除，以便内联样式属性可以设置为top:0px或类似的东西？

Answer 1

对于任何正在努力解决这个问题的人来说，我最终在启动粘性元素的类时动态编写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");
        }
    })

因此，该类将添加正确的top定位，一旦删除该类，top属性本身就会返回0px。

在此代码的\部分中的每个换行符之后设置.html()非常重要，以便它能够正常工作。