jQuery função parece Sair quando diferentes Função jQuery É chamado

Question

Eu escrevi minha própria função que mantém uma barra lateral fixo na tela depois de um certo ponto de rolagem e, em seguida, retorna para a sua posição relativa quando rolada de volta ao topo. Se a janela é redimensionada para um tamanho menor, em seguida, a altura da barra lateral, devolve-lo para a sua posição relativa normal bem. Funciona muito bem!

O problema é que quando eu executar outra função, ou seja, fancybox (), na miniatura panorâmica no corpo da página e tente rolagem, minha função original "rolagem-fix" parece parar de trabalhar.

Alguém sabe por que isso é?

////////////////////
página de demonstração
////////////////////

////////////////////////////////////
"Scroll-Fix" Função

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

});

Answer 1

primeiras mudanças para este código não geram os mesmos problemas

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

então você pode modificar estas linhas em FancyBox

linha 432

$(window).unbind("resize scroll", $.fn.fancybox.scrollBox);

linha 439

$(window).unbind("resize scroll", $.fn.fancybox.scrollBox);

Answer 2

Eu tive um problema muito semelhante e eu tentei comentando e funcionou, mas depois que eu tentei outra solução e funcionou também. Basicamente, eu como alvo o elemento real que a rolagem perto era necessário apenas que no meu caso foi prettyPhoto

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

A parte em negrito , $ .prettyPhoto.close é o que eu acrescentou.

Espero que isso ajude qualquer um que correu para este rolo próximo problema com prettyPhoto.

Answer 3

Problema resolvido.

Acontece FancyBox.js tem uma linha que diz, basicamente, quando você fechar a caixa de fantasia ...

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

Desvinculação da janela faz com que a minha solução de rolagem-fix para desvincular também.

Um simples comentando-out dessa linha (que ocorre duas vezes nessa função fancybox fechar) corrige esse problema.

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