Parece que la función jQuery se cierra cuando se llama a una función jQuery diferente

Question

Escribí mi propia función que mantiene una barra lateral fija en la pantalla después de un cierto punto de desplazamiento y luego la devuelve a su posición relativa cuando se desplaza hacia arriba. Si se cambia el tamaño de la ventana a un tamaño menor que la altura de la barra lateral, también la devuelve a su posición relativa normal. Funciona muy bien!

El problema es cuando ejecuto otra función, a saber, fancybox (), en la miniatura panorámica en el cuerpo de la página, y trato de desplazarme, mi original "scroll-fix" La función parece dejar de funcionar.

¿Alguien sabe por qué esto es?

////////////////////////
Página de demostración
//////////////////////

////////////////////////////////////
" Scroll-Fix " Función

 $(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

primeros cambios para que este código no genere los mismos problemas

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

entonces puedes modificar estas líneas en FancyBox

línea 432

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

línea 439

<*>

Answer 2

Tuve un problema muy similar e intenté comentarlo y funcionó, pero después de eso probé otra solución y también funcionó. Básicamente, apunté al elemento real para el que se necesitaba el desplazamiento cercano solo para lo que en mi caso era prettyPhoto

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

La parte en negrita , $ .prettyPhoto.close es lo que agregué.

Espero que esto ayude a cualquiera que se haya topado con este problema de cierre de desplazamiento con prettyPhoto.

Answer 3

Problema resuelto.

Resulta que FancyBox.js tiene una línea que básicamente dice: cuando cierras el cuadro elegante ...

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

Al desenlazar la ventana, mi solución de corrección de desplazamiento también se desenlaza.

Un simple comentario de esa línea (que ocurre dos veces en esa función de cierre de fancybox) soluciona este problema.

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