jQuery-Funktion scheint zu beenden, wenn verschiedene jQuery Funktion aufgerufen

Question

Ich schrieb meine eigene Funktion, die eine Seitenleiste auf dem Bildschirm nach einem bestimmten Punkt des Scrollens fixiert hält und dann kehrt sie zu ihm relative Position ist, wenn nach oben gescrollt. Wenn das Fenster auf eine Größe kleiner als die Höhe der Seitenleiste der Größe verändert wird, kehrt es zu seiner normalen relativen Position als auch. Funktioniert prima!

Das Problem ist, wenn ich eine andere Funktion ausführen, nämlich fancybox (), auf der Panorama-Miniatur im Körper von der Seite, und versuche, Scrollen, meine ursprüngliche „scroll-fix“ Funktion zu stoppen scheint zu funktionieren.

Wer weiß, warum das so ist?

////////////////////
Demo Seite
////////////////////

////////////////////////////////////
"Scroll-Fix" Funktion

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

erste Änderungen für diesen Code nicht die gleichen Probleme erzeugen

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

, dann können Sie diese Zeilen in FancyBox ändern

Zeile 432

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

line 439

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

Answer 2

Ich hatte ein sehr ähnliches Problem und ich versuchte, es zu kommentieren und es funktioniert aber danach habe ich versucht, eine andere Lösung und es funktioniert auch. Grundsätzlich gezielte ich das eigentliche Element, dass die enge Rolle für nur notwendig war, die in meinem Fall war pretty

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

Der fettgedruckte Teil , $ .prettyPhoto.close ist, was ich hinzugefügt.

Ich hoffe, das jeden, der mit pretty lief in diese Rolle, schließt Problem hilft.

Answer 3

Problem gelöst.

Es stellte sich heraus FancyBox.js eine Linie hat, die im Grunde sagt, , wenn Sie die fancy box schließen ...

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

Unbinding das Fenster verursacht meine Scroll-fix Lösung als auch zu lösen.

Ein einfache Kommentierung-out dieser Linie (die zweimal in dieser fancybox Schließfunktion auftritt) behebt dieses Problem.

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