2009-09-09 3 views
1

Я написал свою собственную функцию, которая фиксирует боковую панель на экране после определенной точки прокрутки, а затем возвращает ее в ее относительное положение при прокрутке назад. Если размер окна изменяется на меньший размер, чем высота боковой панели, он также возвращает его в нормальное относительное положение. Прекрасно работает!Функция jQuery кажется прекращенной, когда вызывается разная функция jQuery.

Проблема заключается в том, что я запускаю еще одну функцию, а именно fancybox(), в панорамной миниатюре в теле страницы и прокручиваю ее, моя оригинальная функция «прокрутки-исправления», похоже, перестает работать.

Кто-нибудь знает, почему это так?

////////////////////
Demo Page
////////////////////


////////////////////////////////////
«Свиток-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"); 
    } 
    }); 

}); 
+0

Приятный дизайн и цыпленок на веб-странице! Я не мог испытать вашу проблему, хотя в Google Chrome. – aolde

+0

Извините, теперь это заметили. Я бы предпочел посмотреть, что делает fancybox, что нарушает ваш скрипт. – aolde

ответ

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); 
+0

Ничего себе, я не могу вас поблагодарить!Единственное, что я заметил, что мне пришлось изменить, - это когда вы определяете переменную нижнего колонтитула. Это «#footer» не «нижний колонтитул». Я делаю эту ошибку ВСЕГДА. Вам не захочется ударить по моей другой проблеме JS !? http://stackoverflow.com/questions/1400646/ позвонив-jqzoom-на-сменным образом –

0

проблема решена.

Оказывается FancyBox.js есть линия, которая в основном говорит, при закрытии фантазии окна ...

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

Отвязка окна вызывает моя прокрутку исправить решение отвязать, а также.

Простая компиляция этой строки (что происходит дважды в этой функции закрытия fancybox) устраняет эту проблему.

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

У меня была очень похожая проблема, и я пробовал комментировать ее, и это сработало, но после этого я попробовал другое решение, и оно тоже сработало. В принципе, я целевой фактический элемент, близкий Свиток, необходимый для только что в моем случае было prettyPhoto

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

Выделенная часть , $ .prettyPhoto.close является то, что я добавил.

Я надеюсь, что это поможет любому, кто столкнулся с этим прокруткой, закрыть проблему с prettyPhoto.