1

スクロールの特定のポイントの後にサイドバーを画面に固定し、スクロールして一番上に戻ったときに相対位置に戻す独自の関数を作成しました。ウィンドウのサイズがサイドバーの高さよりも小さいサイズに変更された場合も、通常の相対位置に戻ります。よく働く！

問題は、ページの本文にあるパノラマ サムネイルで fancybox() という別の関数を実行してスクロールしようとすると、元の「scroll-fix」関数が機能しなくなったように見えることです。

これがなぜなのか知っている人はいますか？

////////////////////
デモページ
///////////////////


///////////////////////////////////
「スクロール固定」機能

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

});
4

3 に答える 3

3

私は非常によく似た問題を抱えていて、コメントしてみましたが、うまくいきましたが、その後、別の解決策を試しましたが、うまくいきました。基本的に、私はクローズスクロールが必要な実際の要素をターゲットにしましたが、私の場合はprettyPhotoでした

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

太字の部分、$。prettyPhoto.closeは私が追加したものです。

これが、prettyPhotoでこのスクロールクローズの問題に遭遇した人に役立つことを願っています。

于 2010-10-18T06:07:17.743 に答える
0

問題が解決しました。

FancyBox.jsには、ファンシーボックスを閉じると基本的に言う行があります...

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

ウィンドウのバインドを解除すると、スクロール修正ソリューションもバインド解除されます。

その行を単純にコメントアウトする (fancybox の close 関数で 2 回発生する) ことで、この問題は修正されます。

if (opts.centerOnScroll) {
//  $(window).unbind("resize scroll");
}
于 2009-09-09T21:31:02.477 に答える
0

このコードを最初に変更して、同じ問題が発生しないようにします

(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);
于 2009-09-09T21:40:21.063 に答える