Jquery Waypoints刷新

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

不要,不要,不要使用fixedposition元素作为航点.请参阅GitHub上的以下所有已关闭问题:#64,#44,#32,#26,#24,#13,#10,#4.

这很容易成为关于Waypoints的最容易被误解的事情,并且绝对不能沟通Waypoint如何运作得很好.我打算在插件的下一次迭代中更加清楚.

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