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 回答