/* let browserScroll = window.scrollY; */ /* window.addEventListener('scroll', () => scroll = window.scrollY); */ (function loop() { const scroll = window.scrollY; document.querySelector('#scrolling').style.transform = `translateY(-${scroll}px)`; document.querySelector('#sidebar').style.transform = `translateY(${scroll}px)`; window.requestAnimationFrame(loop); })();
<div id="scroll"> </div> <div id="wrapper"> <div id="scrolling"> <div id="sidebar"></div> <div id="content"> <!-- long content --> </div> </div> </div>
#wrapper { padding: 8px; } #wrapper { position: fixed; left: 0; right: 0; top: 0; bottom: 0; } #scroll, #content { height: 10000px; } #scrolling { display: flex; will-change: transform; } #sidebar { width: 200px; height: 70px; background-color: #9b59b6; will-change: transform; } #content { flex: 1; background-color: #ecf0f1; }