barra lateral fija hasta un div

Actualmente estoy usando este código:

$(document).ready(function () { var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0)); $(window).scroll(function (event) { // what the y position of the scroll is var y = $(this).scrollTop(); // whether that's below the form if (y >= top) { // if so, ad the fixed class $('#sidebar').addClass('fixed'); } else { // otherwise remove it $('#sidebar').removeClass('fixed'); } }); }); 

Se fixed en mi barra lateral cuando me desplazo hacia abajo después de un punto específico. Quiero que mi barra lateral deje de ser fixed después de que llegue a un punto, que podría ser 200px desde la parte inferior de toda la página. ¿Cómo puedo hacer esto?

Solo necesita agregar algunas verificaciones y cálculos más en el controlador de eventos. Aquí hay un código revisado que debería hacer lo que quieres:

 $(function() { var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0)); var footTop = $('#background2').offset().top - parseFloat($('#background2').css('marginTop').replace(/auto/, 0)); var maxY = footTop - $('#sidebar').outerHeight(); $(window).scroll(function(evt) { var y = $(this).scrollTop(); if (y > top) { if (y < maxY) { $('#sidebar').addClass('fixed').removeAttr('style'); } else { $('#sidebar').removeClass('fixed').css({ position: 'absolute', top: (maxY - top) + 'px' }); } } else { $('#sidebar').removeClass('fixed'); } }); }); 

Puedes verlo en efecto en este jsFiddle .

Puede que no sea exactamente lo que buscas, pero siempre puedes intentar lo siguiente:

http://imakewebthings.github.com/jquery-waypoints/ (Un evento puede activarse cuando se desplaza a un elemento)

o

http://plugins.jquery.com/project/whenScrollBottom (el evento Fires una vez se desplazó hacia la parte inferior, es decir, Twitter o Facebook están cargando más elementos de fonts cuando se desplaza a la parte inferior de la página)