我有一个功能,使得当侧面板(.link-panel)
到达(.footer)
时停止,内部(.link-panel)
为(.cover)
。 (.cover)
是包含(.link-panel
的所有元素的div),所以它是固定的,从技术上讲它是在到达(.footer)
时停止的元素。我的功能首先初始化,如果.control_panel
是在position: inline-block
。如果不是(意思是display: block
,页面宽度是< = 750px),则else语句将初始化并使.cover
的位置相对。脚本只能在页面刷新时正常工作
此功能仅在页面刷新时正常工作。例如,假设我的页面大小为:1300px。显示工作正常,但是当我将窗口大小缩小到< = 750px以下时,即使使用jQuery更改css属性,侧边菜单也会保持固定。只有刷新页面才能解决问题。然后,如果我从< = 750px开始并重新调整大小,则侧边菜单无法正确显示,我必须再次刷新页面才能正确显示。
我的代码
$(document).ready(function(){
var panel = $(".control_panel").css("display");
if(panel == "inline-block"){
fixedScrollBar();
}else{
$(".link-panel").css("position", "relative");
}
});
function fixedScrollBar(){
var windw = this;
$.fn.followTo = function (elem) {
var $this = this,
$window = $(windw),
$bumper = $(elem),
bumperPos = $bumper.offset().top + -40,
thisHeight = $this.outerHeight(),
setPosition = function(){
if ($window.scrollTop() > (bumperPos - thisHeight)) {
$this.css({
position: 'absolute',
top: (bumperPos - thisHeight)
});
} else {
$this.css({
position: 'fixed',
top: 60
});
}
};
$window.resize(function()
{
thisHeight = $this.outerHeight();
setPosition();
});
$window.scroll(setPosition);
setPosition();
};
$('.cover').followTo('.footer');
}
从$(document).ready(function()到fixedScrollBar函数的结尾包装所有内容? – user2896120
yes,除了文档准备好和任何函数体之外,我可以在页面中看到另一个调整大小的事件,它具有什么目的? – madalinivascu
我在Stack Overflow上获得了这个函数,并修改了一下。调整大小功能是他们的想法,但我现在删除它,因为它没有真正的用途。另外,我试图将我的代码封装在您所说的resize事件函数中,但它仍然无法正常工作。它只适用于页面刷新 – user2896120