我编写了自己的函数,该函数在滚动特定点后将边栏固定在屏幕上,然后在滚动回顶部时将其恢复到相对位置。如果将窗口的大小调整为小于边栏的高度,则它也将其返回到其正常的相对位置。很棒!
问题是,当我在页面正文的全景缩略图上运行另一个函数(即fancybox())并尝试滚动时,我原来的“ scroll-fix”函数似乎停止工作。
有人知道为什么吗?
////////////////////
Demo Page
////////////////////
////////////////////////////////////
“滚动固定”功能
$(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");
}
});
});
最佳答案
此代码的第一次更改不会产生相同的问题
(function($) {
$.fn.myScrollFix = function(options) {
options = $.extend({
footer: "footer",
pthis: this,
doc: $(document),
win: $(window)
}, options || {});
options.footer = $(options.footer);
options.accion = function() {
var element = options.pthis,
doc_scroll_top = options.doc.scrollTop(),
doc_height = options.doc.height(),
window_height = options.win.height(),
element_height = options.pthis.height(),
footer_height = options.footer.height();
if (window_height > element_height) {
if ((doc_scroll_top + element_height) > (doc_height - footer_height - 9)) {
element
.css("position","absolute")
.css("top", "auto")
.css("bottom","-60px");
}
else if (doc_scroll_top > 220) {
element
.css("position","fixed")
.css("top","9px")
.css("padding-top","0")
.css("bottom","auto");
}
else {
element
.css("position","relative")
.css("top","auto")
.css("padding-top","57px")
.css("bottom","auto");
}
}
else {
element
.css("position","relative")
.css("top","auto")
.css("padding-top","57px")
.css("bottom","auto");
}
};
$(window).bind("scroll", options.accion);
$(window).bind("resize", options.accion);
options.accion();
};
})(jQuery);
$(document).ready(function(){
$("#sidebar").myScrollFix();
});
然后您可以在FancyBox中修改这些行
432行
$(window).unbind("resize scroll", $.fn.fancybox.scrollBox);
439行
$(window).unbind("resize scroll", $.fn.fancybox.scrollBox);