يبدو أن وظيفة jQuery تتوقف عند استدعاء وظيفة jQuery مختلفة

Question

لقد كتبت وظيفتي الخاصة التي تحافظ على الشريط الجانبي ثابتًا على الشاشة بعد نقطة معينة من التمرير ثم تعيده إلى موضعه النسبي عند التمرير مرة أخرى إلى الأعلى.إذا تم تغيير حجم النافذة إلى حجم أصغر من ارتفاع الشريط الجانبي، فإنها تعيدها إلى وضعها النسبي الطبيعي أيضًا.يعمل بشكل رائع!

المشكلة هي عندما أقوم بتشغيل وظيفة أخرى، وهي Fancybox()، على الصورة المصغرة البانورامية في نص الصفحة، وأحاول التمرير، يبدو أن وظيفة "إصلاح التمرير" الأصلية الخاصة بي تتوقف عن العمل.

هل يعرف أحد لماذا هذا؟

////////////////////
الصفحة التجريبية
////////////////////

////////////////////////////////////
وظيفة "التمرير الإصلاح".

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

التغييرات الأولى لهذا الرمز حتى لا تولد نفس المشاكل

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

ثم يمكنك تعديل هذه السطور في FancyBox

السطر 432

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

السطر 439

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

Answer 2

واجهت مشكلة مشابهة جدًا وحاولت التعليق عليها ونجحت ولكن بعد ذلك جربت حلًا آخر ونجح أيضًا.في الأساس، استهدفت العنصر الفعلي الذي كان مطلوبًا للتمرير الوثيق من أجله فقط والذي كان في حالتي beautifulPhoto

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

الجزء الجريء , $.prettyPhoto.إغلاق هو ما أضفته.

آمل أن يساعد هذا أي شخص واجه مشكلة إغلاق التمرير مع PrettyPhoto.

Answer 3

تم حل المشكلة.

تبين أن FancyBox.js يحتوي على سطر يقول بشكل أساسي، عندما تغلق الصندوق الفاخر..

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

يؤدي إلغاء ربط النافذة إلى إلغاء ربط حل إصلاح التمرير الخاص بي أيضًا.

يعمل التعليق البسيط على هذا السطر (والذي يحدث مرتين في وظيفة إغلاق صندوق الخيال) على حل هذه المشكلة.

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