6

我正在处理一个页面，该页面使用航点创建一个粘性 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 位置的想法都将不胜感激。

谢谢

4

1 回答 1

23

不要，不要，永远不要使用fixed位置元素作为航点。在 GitHub 上查看以下所有已关闭的问题：#64、#44、#32、#26、#24、#13、#10、#4。

这很容易成为关于 Waypoints 最容易被误解的事情，而且我没有充分说明 Waypoints 是如何运作的，这绝对是我的错。我计划在插件的下一次迭代中更清楚地说明这一点。

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

于 2012-05-04T11:32:02.763 回答