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