Функция jQuery завершает работу при вызове другой функции jQuery
Вопрос
Я написал свою собственную функцию, которая удерживает боковую панель на экране после определенной точки прокрутки, а затем возвращает ее в относительное положение при прокрутке обратно вверх.Если размер окна изменяется до размера, меньшего высоты боковой панели, оно также возвращает его в нормальное относительное положение.Прекрасно работает!
Проблема заключается в том, что когда я запускаю другую функцию, а именно необычную коробку(), на панорамном миниатюре в теле страницы и пытаюсь прокрутить, моя первоначальная функция «прокрутки-исправления», похоже, перестает работать.
Кто-нибудь знает, почему это так?
////////////////////
Демо-страница
////////////////////
////////////////////////////////////
Функция «Прокрутка-фиксация»
$(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
$(window).unbind("resize scroll", $.fn.fancybox.scrollBox);
Другие советы
У меня была очень похожая проблема, и я попробовал прокомментировать ее, и это сработало, но после этого я попробовал другое решение, и оно тоже сработало.По сути, я нацелился на тот элемент, для которого требовалась закрытие прокрутки, и в моем случае это было красивое фото.
$(window).unbind('scroll', $.prettyPhoto.close);
Жирная часть , $.prettyPhoto.close это то, что я добавил.
Я надеюсь, что это поможет всем, кто столкнулся с проблемой закрытия прокрутки в PrettyPhoto.
Задача решена.
Оказывается, в FancyBox.js есть строка, в которой говорится: когда закроешь красивую коробочку...
if (opts.centerOnScroll) {
$(window).unbind("resize scroll");
}
Отмена привязки окна также приводит к отмене привязки моего решения для прокрутки.
Простое закомментирование этой строки (которое происходит дважды в функции закрытия FancyBox) решает эту проблему.
if (opts.centerOnScroll) {
// $(window).unbind("resize scroll");
}