Cómo mantener siempre visible la columna más corta con jQuery

Cuando tenemos un layout con varias columnas y no sabemos cuál va a ser la mayor puede que la más corta quede fuera de la vista cuando el usuario hace scroll.

Mi tema de WordPress sería un claro ejemplo, en resoluciones grandes estáis viendo una columna a la izquierda que a veces es menor que el contenido de los artículos, por ejemplo en este artículo: 9 grandes documentales sobre diseño, fotografía y arte. En mi caso en los casos en que la columna izquierda sea más larga que el contenido lo que hago es asignar la misma altura al artículo.

Os comparto este pequeño jQuery  para detectar cuál es la columna más corta y hacer que cuando vaya a dejar de ser visible por el scroll se haga fija abajo de la página de forma que siempre estará visible.

Si intercambiáis los valores de la altura de las columnas en el CSS en línea de los divs en el HTML y le dáis a Rerun veréis como funciona.

<div id="content" style="height:1200px;"></div>
<div id="sidebar" style="height:200px;"></div>

See the Pen Sticky shortest column to bottom when scrolling by Cristian Eslava (@ceslava) on CodePen.

Código jQuery

Para utilizarlo debéis cambiar los selectores para las columnas, en mi caso he puesto #content y #sidebar y también un condicional para que sólo se haga en resoluciones de más de 400px de ancho. También debes eliminar en producción la línea que añade el texto Shortest a la columna más corta.

$(function() {

 anchodocumento = $(document).width();

 if (anchodocumento > 400) {
 var content = $('#content'); /* cambia el selector */
 var sidebar = $('#sidebar'); /* cambia el selector */
 var documentHeight = $(document).height();
 var contentHeight = content.height();
 var sidebarHeight = sidebar.height();

 $(window).scroll(function() {

 if (sidebarHeight < contentHeight)

 {
 shortestContent = sidebar;
 } else {
 shortestContent = content;
 }
 shortestContent.append('<h1>Shortest</h1>'); /* esta línea es sólo para la demo */

 scrollwindow = $(window).scrollTop();

 if (shortestContent.height() < scrollwindow)

 {
 shortestContent.css({
 position: 'fixed',
 bottom: 0
 });
 } else {
 shortestContent.css({
 position: 'static'
 });
 }

 });
 }
});