La funzione jQuery sembra terminare quando viene chiamata una funzione jQuery diversa

Question

Ho scritto la mia funzione che mantiene fissa una barra laterale sullo schermo dopo un certo punto di scorrimento e poi la riporta nella sua posizione relativa quando si torna indietro. Se la finestra viene ridimensionata a una dimensione inferiore all'altezza della barra laterale, la riporta anche nella sua normale posizione relativa. Funziona alla grande!

Il problema è quando eseguo un'altra funzione, vale a dire fancybox (), sulla miniatura panoramica nel corpo della pagina, e provo a scorrere, il mio originale "scroll-fix" la funzione sembra smettere di funzionare.

Qualcuno sa perché questo è?

////////////////////
Pagina di dimostrazione
////////////////////

////////////////////////////////////
" Arrotoli-Fix " Funzione

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

prime modifiche per questo codice per non generare gli stessi problemi

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

quindi puoi modificare queste righe in FancyBox

linea 432

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

linea 439

<*>

Answer 2

Ho avuto un problema molto simile e ho provato a commentarlo e ha funzionato, ma dopo ho provato un'altra soluzione e ha funzionato anche. Fondamentalmente, ho preso di mira l'elemento reale secondo cui lo scroll vicino era necessario solo per il mio caso, invece, era prettyPhoto

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

La parte in grassetto , $ .prettyPhoto.close è ciò che ho aggiunto.

Spero che questo aiuti chiunque abbia incontrato questo problema di chiusura con prettyPhoto.

Answer 3

Problema risolto.

Si scopre che FancyBox.js ha una linea che dice sostanzialmente quando chiudi la scatola fantasia ...

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

La non associazione della finestra fa slegare anche la mia soluzione di correzione dello scorrimento.

Un semplice commento di quella riga (che si verifica due volte nella funzione di chiusura di fancybox) risolve questo problema.

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