Cómo desplazarte hacia abajo en una página y una vez que llegues al final de la barra lateral, haz que se pegue a la parte inferior de la página

Estoy tratando de reproducir esta barra lateral:

http://www.fastcodesign.com/3020546/innovation-by-design/would-steve-jobs-have-become-steve-jobs-using-a-computer-designed-by-st

Parece ser que solo estás desplazándote hacia abajo en la página, pero una vez que llegas a la parte inferior de la barra lateral (y mientras haya más contenido para mostrar en el contenedor principal), la barra lateral se pega a la parte inferior de la página web pero cuando se desplaza hacia arriba, la barra lateral se desplaza hacia arriba ..

¿Cómo puedes reproducir esto?

¡Aclamaciones!

La mayor parte de mi respuesta está tomada de esta pregunta .

Aquí hay un diseño básico de la barra lateral / cuerpo con una barra lateral que podemos usar en nuestro JavaScript / jQuery.

El CSS. Lo más importante aquí es la clase .sticky que agregaremos con jQuery. El rest está justo ahí para el diseño de demostración.

 div.container { overflow: hidden; width: 100%; } div.body { width: 45%; float: left; } div.sidebar { width: 45%; float: right; } .stick { position: fixed; bottom: 0; right: 0; } 

Y la jQuery / JS. Ver comentarios para explicación.

 $(document).ready(function() { // Cache selectors for faster performance. var $window = $(window), $sidebar = $('#sidebar'), $sidebarAnchor = $('#sidebarAnchor'); // Run this on scroll events. $window.scroll(function() { var window_top = $window.scrollTop(); var div_top = $sidebarAnchor.offset().top; if (window_top > div_top) { // Make the div sticky. $sidebar.addClass('stick'); $sidebarAnchor.height($sidebar.height()); } else { // Unstick the div. $sidebar.removeClass('stick'); $sidebarAnchor.height(0); } }); }); 

Compruebe si document.body.scrollTop + window.innerHeight es mayor o igual que la altura de la barra lateral:

http://jsbin.com/AjagUzi/1/edit?html,css,js,output