jQuery .offset desde la posición inferior no funciona en una función de desplazamiento?

Question

Tengo problemas para configurar 2 posiciones en una función de desplazamiento usando desplazamiento.

He creado un violín para que pueda ver ... http://jsfiddle.net/motocomdigital/SGCHt/12/

Al abrir esta violín, reducir el violín ventana de vista previa hasta el tamaño similar de la pantalla de abajo.

MI PROBLEMA

Se puede ver que estoy usando sentencias condicionales para controlar la posición de las fichas azules, dependiendo de lo que desplazarse punto están.

Las columnas amarillas representan los contenedores de pestañas, y estoy escribiendo para usar una declaración if else para controlar el posicionamiento inferior para que las pestañas azules nunca salgan de los contenedores amarillos.

Pero no puedo hacer que esto funcione. Mi compensación de posición inferior no funciona.

var $tab = $('.tab-button'); 

$(window).bind("resize.browsersize", function() { 

    var windowHalf = $(window).height()/2, 
     content = $("#content"), 
     pos  = content.offset(); 


    $(window).scroll(function(){ 

     if ($(window).scrollTop() >= pos.top + windowHalf){ 

      $tab.removeAttr('style').css({ position:'fixed', top:'50%'}); 

     } else if ($(window).scrollTop() >= pos.bottom + windowHalf){ 

      $tab.removeAttr('style').css({ position:'absolute', bottom:'0px'}); 

     } else { 

      $tab.removeAttr('style').css({ top: $(window).height() + 'px' }); 

     } 

    }); 

}).trigger("resize.browsersize"); 

Puede alguien por favor me ayude a entender dónde voy mal.

Gracias Josh

Answer 1

Así que parece que debe calcular el desplazamiento de un elemento de forma manual inferior. Traté de encontrar algo para hacer tu vida más fácil en la documentación de jQuery, pero apareció sin nada. Supuestamente desplazamiento sólo es compatible con la parte superior/izquierda

http://api.jquery.com/offset/

Si nos encontramos con la altura de la envoltura, restar la altura de las pestañas, podemos averiguar exactamente dónde limitar la pestaña de desplazamiento.

También incluí una definición jQuery css de la pestaña superior. Sin definirlo onload, hubo un extraño cambio de altura del documento antes del primer desplazamiento.

http://jsfiddle.net/SGCHt/16/