Barra lateral fija con altura relativa y transición absoluta fluida

Busco lograr una barra lateral fija que se desplace hasta la parte inferior de la división y luego se convierta en un elemento con una posición absoluta para evitar que continúe en la página.

Cuando se desplaza hacia arriba, la barra lateral vuelve a la posición fija. La barra lateral debe heredar la misma altura que la columna al lado para que la barra lateral fija no se vea extraña. El tamaño de la barra lateral debe modificarse cuando se cambia el tamaño de la pantalla para que coincida con la columna.

Hasta ahora he podido:

  • Crea el código que hereda la altura de la columna y lo aplica al div.
  • Hacer que el código que recalculó la altura en el tamaño de la ventana.
  • Haga el código que cambia el posicionamiento de fijo -> absoluto y viceversa

He hecho el código que calcula hasta dónde debería desplazarse el div. Sin embargo, aquí es donde me encuentro con problemas:

  • Lo necesito para actualizar la distancia que se desplaza en relación con la barra lateral en el cambio de tamaño de la ventana (creo que significa simplemente ejecutar el script nuevamente dentro del cambio de tamaño, no estoy muy seguro)
  • El cálculo de la distancia que debe desplazarse es relativo a la altura del navegador de los usuarios y, por lo tanto, no se desplaza al punto correcto cuando está en una pantalla de 15 “en comparación con una de 23”

Estoy buscando ayuda para hacer el script que calcula la distancia a la que debería desplazarse y cambiar el tamaño para crear una experiencia perfecta.

Además de alguna ayuda para averiguar la ecuación correcta que se debe utilizar, para que aparezca correctamente en todas las instancias de la ventana del navegador.

Javascript

$(document).ready(function() { var offsetHeight = document.getElementById('main-column').offsetHeight; document.getElementById('main-sidebar').style.height = offsetHeight+'px'; function updateHeight() { var offsetHeight = document.getElementById('main-column').offsetHeight; document.getElementById('main-sidebar').style.height = offsetHeight+'px'; } $(window).resize(updateHeight).trigger('resize') $(window).bind('scroll', function() { if($(window).scrollTop() >= 40 + $('#main-sidebar').offset().top + offsetHeight - window.innerHeight) { $('.sidebar-wrap').addClass('scroll'); } else { $('.sidebar-wrap').removeClass('scroll'); } }); }); 

HTML

 
<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb(' '); } ?>

SCSS / CSS

 .wrap { .main-page { .row-2col-left { .sidebar { position: relative; width: 30%; .sidebar-wrap { position: fixed; } .sidebar-wrap.scroll { position: absolute; bottom: 0; } } .column { width: 70%; } } } } 

Lo modifiqué editando el código utilizado para calcular la distancia de desplazamiento:

 $(window).bind('scroll', function() { if($(window).scrollTop() >= offsetHeight - 100) { $('.sidebar-wrap').addClass('scroll'); } else { $('.sidebar-wrap').removeClass('scroll'); } }); 

Debido a que ya sabemos que offsetHeight es igual a la altura de la barra lateral, luego me metí con los valores de resta hasta que fue fluida. Si tuviera que usar este código, creo que tendría que cambiar el valor de – 100 para que funcione.

EDITAR: Lo hice todo en una función y habilité todo para actualizarse en el cambio de tamaño de la ventana, que también se dispara una vez que se completa el cambio de tamaño.