¿Cómo lograría que un elemento/div permanezca en su lugar (SIN posición: fija;) mientras se desplaza? (En realidad, esta página es un ejemplo perfecto. El lado izquierdo con los botones no se mueve, mientras que puedes desplazarte por esta página donde está el contenido de esta/mi publicación).
Digamos que tiene dos divs, ambos son bloques en línea. El div izquierdo que desea permanecer en su lugar. Solo desea permitir el desplazamiento en el div derecho. (pistas diferentes). posición: fija; realmente no me da el resultado que estoy buscando. Abierto a cualquier solución en CSS, vanilla JS y/o jQuery. Aquí hay un código que he estado probando:
HTML:
<div class="container"> <div class="left"> <!-- Content --> </div> <div class="right"> <!-- Content --> </div> </div>CSS:
.left { display: inline-block; vertical-align: top; background-color: #F9F9F9; border-right: 2px solid $blueBorder; padding: 0.5%; overflow-x: hidden; overflow-y: hidden; } .right { display: inline-block; vertical-align: top; background-color: gray; padding: 0.5%; }jQuery:
$(window).scroll(function() { $('#left').css('top', $(this).scrollTop() + "px"); });Esto se puede hacer con CSS puro. Como usted señaló, esta página es un ejemplo. Si profundiza en él con las herramientas de desarrollo de su navegador, encontrará algo similar a esto a continuación.
body { height: 100vh; margin: 0; display: flex; flex-direction: column; } .header { flex: 0 0 40px; border: 1px solid black; } .container { display: flex; flex: 1; overflow: hidden; border: 1px solid black; } .left { flex-basis: 300px; border: 1px solid black; } .right { flex: 1; border: 1px solid black; overflow: auto; } <body> <div class="header"> Header </div> <div class="container"> <div class="left"> Left </div> <div class="right"> Right <div style="height:200vh;"></div> With long content </div> </div> </body>Lo bueno es que puede inspeccionar este sitio web haciendo clic con el botón derecho y simplemente mirar el Código de StackOverflow. Están siguiendo el método pegajoso, he hecho una versión básica a continuación
#contents{ display: flex; } #left{ background-color:yellow; position: relative !important; width:150px; } #sticky{ position: sticky; background-color:red; top: 0; } #right{ background-color:blue; position: relative !important; width:150px; height:650px; } <div id="contents"> <div id="left"> <div id="sticky"> top<br> blah<br> </div> </div> <div id="right"> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15<br> 16<br> </div> </div>editar, gramática/ortografía