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

Question

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

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

有人知道这是为什么吗？

////////////////////
<强> 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");
    }
  });

});

Answer 1

我遇到了一个非常相似的问题，我尝试对其进行评论并且它有效，但之后我尝试了另一个解决方案，它也有效。基本上，我的目标是需要关闭滚动的实际元素，在我的例子中是 PrettyPhoto

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

粗体部分，$.prettyPhoto.close是我添加的。

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