我编写了自己的函数,该函数在滚动某个点后将侧边栏固定在屏幕上,然后在滚动回顶部时将其返回到它的相对位置。如果窗口的大小调整为小于侧边栏高度的大小,它也会将其返回到其正常的相对位置。效果很好!
问题是当我在页面主体的全景缩略图上运行另一个函数,即 fancybox() 并尝试滚动时,我原来的“滚动修复”函数似乎停止工作。
有谁知道这是为什么?
//////////////////
演示页面
/////////////////
//////////////////////////////
“滚动修复”功能
$(document).ready(function(){
var element = $("#sidebar");
var window_height = $(window).height();
var element_height = element.height();
$(window).ready(function() {
if (window_height > element_height) {
if (($(document).scrollTop() + element.height()) > ($(document).height() - $("#footer").height() - 9)) {
element.css("position","absolute");
element.css("top", "auto");
element.css("bottom","-60px");
}
else if ($(document).scrollTop() > 220) {
element.css("position","fixed");
element.css("top","9px");
element.css("padding-top","0");
element.css("bottom","auto");
}
else {
element.css("position","relative");
element.css("top","auto");
element.css("padding-top","57px");
element.css("bottom","auto");
}
}
else {
element.css("position","relative");
element.css("top","auto");
element.css("padding-top","57px");
element.css("bottom","auto");
}
});
$(window).scroll(function() {
if (window_height > element_height) {
if (($(document).scrollTop() + element.height()) > ($(document).height() - $("#footer").height() - 9)) {
element.css("position","absolute");
element.css("top", "auto");
element.css("bottom","-60px");
}
else if ($(document).scrollTop() > 220) {
element.css("position","fixed");
element.css("top","9px");
element.css("padding-top","0");
element.css("bottom","auto");
}
else {
element.css("position","relative");
element.css("top","auto");
element.css("padding-top","57px");
element.css("bottom","auto");
}
}
else {
element.css("position","relative");
element.css("top","auto");
element.css("padding-top","57px");
element.css("bottom","auto");
}
});
$(window).resize(function(){
window_height = $(window).height();
if (window_height > element_height) {
if (($(document).scrollTop() + element.height()) > ($(document).height() - $("#footer").height() - 9)) {
element.css("position","absolute");
element.css("top", "auto");
element.css("bottom","-60px");
}
else if ($(document).scrollTop() > 220) {
element.css("position","fixed");
element.css("top","9px");
element.css("padding-top","0");
element.css("bottom","auto");
}
else {
element.css("position","relative");
element.css("top","auto");
element.css("padding-top","57px");
element.css("bottom","auto");
}
}
else {
element.css("position","relative");
element.css("top","auto");
element.css("padding-top","57px");
element.css("bottom","auto");
}
});
});