La fonction jQuery semble s'arrêter quand une fonction jQuery différente est appelée

Question

J'ai écrit ma propre fonction qui maintient une barre latérale fixe à l'écran après un certain point de défilement, puis la ramène à sa position relative lorsqu'on la fait défiler vers le haut. Si la fenêtre est redimensionnée à une taille inférieure à la hauteur de la barre latérale, elle revient également à sa position relative normale. Fonctionne très bien!

Le problème est lorsque j'exécute une autre fonction, à savoir fancybox(), sur la vignette panoramique dans le corps de la page, et essayez de faire défiler, ma fonction originale "scroll-fix" semble cesser de fonctionner.

Quelqu'un sait pourquoi?

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

////////////////////////////////////
« Faites-Fix "Fonction

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

premiers changements de ce code pour ne pas générer les mêmes problèmes

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

alors vous pouvez modifier ces lignes FancyBox

ligne 432

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

ligne 439

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

Answer 2

problème résolu.

Il s'avère FancyBox.js a une ligne qui dit essentiellement, lorsque vous fermez la boîte de fantaisie ...

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

Dissocier la fenêtre provoque ma solution défilement-fix à délier ainsi.

Un simple commentaire sur cette ligne (qui se produit deux fois dans cette fonction de fermeture de fancybox) résout ce problème.

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

Answer 3

J'ai eu un problème très semblable et j'ai essayé de le commenter et cela a fonctionné mais après que j'ai essayé une autre solution et cela a fonctionné aussi. Fondamentalement, je ciblé l'élément réel que le défilement à proximité était nécessaire pour que dans mon cas était prettyPhoto

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

La partie en gras , $ .prettyPhoto.close est ce que j'ajouté.

J'espère que cela aidera tous ceux qui ont rencontré ce problème de près avec prettyPhoto.