我正在使用路标创建一个粘性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位置的任何想法都将非常感激.
谢谢
解决方法
不要,不要,不要使用固定位置元素作为航点.请参阅GitHub上的所有以下已结束问题：
#64,#44,#32,#26,#24,#13,#10,#4.
这很容易成为关于Waypoints的最容易被误解的事情,并且绝对不能告知Waypoints如何运作得很好.我打算在插件的下一次迭代中更加清楚.
对于任何想知道的人：Waypoints通过查看元素的页面偏移量来工作.但是,当用户滚动时,固定位置元素的页面偏移量会不断变化.因此,每当调用刷新时,无论是手动,通过添加另一个航点,还是通过调整浏览器的大小,该航点的位置都会发生变化,以匹配用户当时在页面滚动中所处的位置.你想要的是一个普通的静态位置元素,它不会使文档流成为航点.在Waypoints项目网站上给出的示例中,航点是一个保留在原位的包装元素,而导航包裹增益并通过CSS丢失固定位置.对于那些不了解页面偏移和CSS的人来说,这很容易做OP在这里所做的事情,因为它看起来很直观.同样,这将在未来的文档/示例中更直接地解决.
