La fonction jQuery semble quitter lorsque différentes fonctions jQuery sont appelées

Question

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

Le problème, c’est que lorsque je lance une autre fonction, à savoir fancybox (), sur la vignette panoramique située dans le corps de la page, et que je tente de faire défiler le texte original, "scroll-fix". la fonction semble cesser de fonctionner.

Quelqu'un sait pourquoi?

//////////////////////// // Page de démonstration
//////////////////////

////////////////////////////////////////////
" Scroll-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 pour 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 dans FancyBox

ligne 432

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

ligne 439

<*>

Answer 2

J'ai eu un problème très similaire et j'ai essayé de le commenter et cela a fonctionné, mais après cela, j'ai essayé une autre solution et cela a également fonctionné. En gros, je ciblais l’élément sur lequel le parchemin étroit était nécessaire, mais dans mon cas, c'était joliPhoto

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

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

J'espère que cela aidera tous ceux qui ont rencontré ce problème de fermeture du défilement avec prettyPhoto.

Answer 3

Problème résolu.

Il se trouve que FancyBox.js a une ligne qui dit en gros lorsque vous fermez la boîte fantaisie ...

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

La suppression de la liaison de la fenêtre entraîne également le désolidarisation de ma solution de correction de défilement.

Un simple commentaire de 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");
}