Question

我正在使用路标创建一个粘性div的页面，该div向下滚动页面的位置：固定直到它到达其父div的底部。代码即时使用按预期工作，直到$ .waypoints（'refresh'）被调用，然后粘性div跳回到页面顶部并失去其固定位置。

下面是代码：

$('#content').waypoint(function(event, direction){
if (direction === 'down') {
    $(this).removeClass('sticky').addClass('bottomed');
}
else {
    $(this).removeClass('bottomed').addClass('sticky');
}
}, {
    offset: function() {
    return $('#leftCol').outerHeight() - $('#content').outerHeight();
}

}).find('#leftCol').waypoint(function(event, direction) {
    $(this).parent().toggleClass('sticky', direction === "down");
    event.stopPropagation();
         });

其中#leftCol是向下滚动页面的div，而#content是其父div。

我拥有的CSS是：

#content {
width: 975px;
height: auto;
position: relative;
margin-top: 10px;
margin-bottom: 20px;
min-height: 800px;
}

#leftCol {
position: absolute;
width: 974px;
}

.sticky #leftCol {
position:fixed !important;
top:0 !important;
left: 50% !important;
width: 974px !important;
margin-left: -488px;
}

.bottomed #leftCol {
position: absolute !important;
bottom: 0px;
}

有关如何在调用$ .waypoints（'refresh'）时保持#leftCol位置的任何想法都将非常感激。

由于

Answer 1

不要，不要，不要使用fixed位置元素作为航点。请参阅GitHub上的所有以下已结束问题：#64，#44，#32，#26，#24，#13，{{3} }，#10。

这很容易成为关于Waypoints的最容易被误解的事情，并且绝对不能沟通Waypoint如何运作得很好。我计划在插件的下一次迭代中更清楚地说明这一点。

对于任何想知道的人：Waypoints通过查看元素的页面偏移量来工作。但是，当用户滚动时，固定位置元素的页面偏移量不断变化。因此，每当调用刷新时，无论是手动，通过添加另一个航点，还是通过调整浏览器的大小，该航点的位置都会更改以匹配用户在页面滚动时的位置。你想要的是一个普通的静态位置元素，它不会使文档流成为航点。在Waypoints项目站点上给出的示例中，waypoint是一个保留在原位的包装元素，而nav它包装了增益并通过CSS失去了固定定位。对于那些没有理解页面偏移和CSS的人来说，做这些OP在这里所做的事情非常容易，因为它看起来很直观。同样，这将在未来的文档/示例中更直接地解决。

Jquery Waypoints刷新

1 个答案: