Estoy tratando de hacer que la línea se extienda cuando alguien se desplaza hacia abajo y se encoja cuando alguien se desplaza hacia arriba. No estoy seguro de qué es exactamente lo que falta para el JavaScript.

https://jsfiddle.net/nqu2L4mc/

JavaScript

 // Timeline Begins "use strict"; function qs(selector, all = false) { return all ? document.querySelectorAll(selector) : document.querySelector(selector); } const sections = qs('.timeline_section', true); const timeline = qs('.timeline'); const line = qs('.timeline_line'); line.style.bottom = `calc(100%)`; let prevScrollY = window.scrollY; let up, down; let full = false; let set = 0; const targetY = window.innerHeight * .8; function scrollHandler(e) { const { scrollY } = window; up = scrollY < prevScrollY; down = !up; const timelineRect = timeline.getBoundingClientRect(); const lineRect = line.getBoundingClientRect(); // const lineHeight = lineRect.bottom - lineRect.top; const dist = targetY - timelineRect.top; console.log(dist); if (down && !full) { set = Math.max(set, dist); line.style.bottom = `calc(100% - ${set}px)`; } if (dist > timeline.offsetHeight + 50 && !full) { full = true; line.style.bottom = `-50px`; } sections.forEach(item => { // console.log(item); const rect = item.getBoundingClientRect(); // console.log(rect); if (rect.top + item.offsetHeight / 5 < targetY) { item.classList.add('show-me'); } }); // console.log(up, down); prevScrollY = window.scrollY; } scrollHandler(); line.style.display = 'block'; window.addEventListener('scroll', scrollHandler); // Timeline Ends

Sería genial si alguien pudiera editar el código directamente.

Gracias por adelantado