異なるjQuery関数が呼び出されたときにjQuery関数が終了したように見える
質問
特定のスクロールポイントの後にサイドバーを画面上に固定しておく機能を独自に作成し、上にスクロールしたときにサイドバーを相対位置に戻します。ウィンドウのサイズをサイドバーの高さよりも小さいサイズに変更すると、通常の相対位置に戻ります。すばらしい!
問題は、ページ本体のパノラマサムネイルで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");
}
});
});
解決
同じ問題を発生させないためのこのコードの最初の変更
(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
<*>他のヒント
非常によく似た問題があり、コメントしてみましたが、うまくいきましたが、その後、別の解決策を試してみましたが、うまくいきました。基本的に、クローズスクロールが必要な実際の要素をターゲットにしました。私の場合はprettyPhoto
$(window).unbind('scroll', $.prettyPhoto.close);
太字部分、$。prettyPhoto.close は追加したものです。
prettyPhotoでこのスクロールクローズの問題に遭遇したすべての人の助けになることを願っています。
問題は解決しました。
FancyBox.jsには、基本的に、ファンシーボックスを閉じると...
という行がありますif (opts.centerOnScroll) {
$(window).unbind("resize scroll");
}
ウィンドウのバインドを解除すると、スクロール修正ソリューションもバインド解除されます。
この行の簡単なコメントアウト(fancybox close関数で2回発生)により、この問題が修正されます。
if (opts.centerOnScroll) {
// $(window).unbind("resize scroll");
}