jQuery函数似乎在调用不同的jQuery函数时退出

我编写了自己的函数，在某个滚动点之后将侧边栏固定在屏幕上，然后在滚动回到顶部时将其返回到它的相对位置。 如果窗口的大小调整为小于侧边栏的高度，则会将其返回到正常的相对位置。 效果很好！

问题是当我在页面正文中的全景缩略图上运行另一个函数，即fancybox（），并尝试滚动时，我原来的“滚动修复”function似乎停止工作。

谁知道为什么会这样？

////////////////////
演示页面
////////////////////

////////////////////////////////////
“滚动修复”function

$(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"); } }); }); 

Answer 1

对此代码的第一次更改不会产生相同的问题

 (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); 

Answer 2

我有一个非常类似的问题，我尝试评论它，它工作，但在那之后我尝试了另一个解决方案，它也工作。 基本上，我的目标是关闭滚动所需的实际元素，仅在我的情况下是prettyPhoto

 $(window).unbind('scroll', $.prettyPhoto.close); 

大胆的部分$ .prettyPhoto.close就是我添加的内容。

我希望这可以帮助任何遇到这个滚动的人关闭prettyPhoto的问题。

Answer 3

问题解决了。

原来FancyBox.js有一条线，基本上说， 当你关闭花哨的盒子…

 if (opts.centerOnScroll) { $(window).unbind("resize scroll"); } 

取消绑定窗口会导致我的滚动修复解决方案解除绑定。

该行的简单注释（在该fancybox关闭函数中出现两次）修复了这个问题。

 if (opts.centerOnScroll) { // $(window).unbind("resize scroll"); }