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
$(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 Close Function에서 두 번 발생) 은이 문제를 해결합니다.
if (opts.centerOnScroll) {
// $(window).unbind("resize scroll");
}