jQuery Function Seems to Quit When Different jQuery Function Is Called

Question

I wrote my own function that keeps a sidebar fixed on screen after a certain point of scrolling and then returns it to it's relative position when scrolled back to the top. If the window is resized to a size smaller then the height of the sidebar, it returns it to its normal relative position as well. Works great!

Problem is when I run another function, namely fancybox(), on the panoramic thumbnail in the body of the page, and try scrolling, my original "scroll-fix" function seems to stop working.

Anyone know why this is?

////////////////////
Demo Page
////////////////////

////////////////////////////////////
"Scroll-Fix" 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

Problem Solved.

Turns out FancyBox.js has a line that basically says, when you close the fancy box...

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

Unbinding the window causes my scroll-fix solution to unbind as well.

A simple commenting-out of that line (which occurs twice in that fancybox close function) fixes this problem.

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

Answer 2

first changes for this code to not generate the same problems

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

then you can modify these lines in FancyBox

line 432

$(window).unbind("resize scroll", $.fn.fancybox.scrollBox);

line 439

$(window).unbind("resize scroll", $.fn.fancybox.scrollBox);

Answer 3

I had a very similar problem and I tried commenting it and it worked but after that I tried another solution and it worked too. Basically, I targeted the actual element that the close scroll was needed for only which in my case was prettyPhoto

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

The bold part , $.prettyPhoto.close is what I added.

I hope this helps anyone who ran into this scroll close problem with prettyPhoto.