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

나는 매우 비슷한 문제를 겪었고 댓글을 달아 시도했지만 효과가 있었지만 그 후에는 다른 솔루션을 시도해 보았습니다. 기본적으로, 나는 내 경우에만 닫기 스크롤이 필요하다는 실제 요소를 목표로 삼았습니다.

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

대담한 부분 , $ .prettyphoto.close 내가 추가 한 것입니다.

이것이 PrettyPhoto와 함께이 두루마리가 가까운 문제를 겪은 사람이라면 누구나 도움이되기를 바랍니다.

Answer 3

문제 해결됨.

Fancybox.js는 기본적으로 말하는 줄이 있습니다. 멋진 상자를 닫으면 ...

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

창을 풀면 스크롤 고정 솔루션이 해제되지 않습니다.

해당 라인의 간단한 주석 (Fancybox Close Function에서 두 번 발생) 은이 문제를 해결합니다.

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