Básicamente, me gustaría desplazar las imágenes y el texto al mismo tiempo, pero cuando aparece la parte inferior del texto, me gustaría que se detuviera, mientras podía seguir desplazando las imágenes.
Traté de usar la posición fija en el texto, pero solo se desplaza cuando desplazo todas las imágenes. Tal vez lo usé de la manera incorrecta.
En este ejemplo, he reemplazado las imágenes por cuadros de color.
body{ display: flex; margin: 0; } nav{ position: fixed; top: 0; left: 0; right: 0; background: #ffc3d9; height: 50px; } section, aside{ margin-top: 50px; width: 50vw; } .block{ display: block; width: 100%; height: 200px; } p{ margin: 10px; } <nav> </nav> <section> <div class="block" style="background:#ffff61;"> </div> <div class="block" style="background:#61fff1;"> </div> <div class="block" style="background:#f561ff;"> </div> </section> <aside> <p>Cat ipsum dolor sit amet, really likes hummus but put butt in owner's face spend all night ensuring people don't sleep sleep all day proudly present butt to human. Behind the couch pooping rainbow while flying in a toasted bread costume in space poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls for carefully drink from water glass and then spill it everywhere and proceed to lick the puddle meow. Disappear for four days and return home with an expensive injury; bite the vet i like frogs and 0 gravity why can't i catch that stupid red dot leave buried treasure in the sandbox for the toddlers so with tail in the air or catch mouse and gave it as a present.</p> </aside>Es posible ? Si es así, ¿cómo?
EDITAR: Intenté nuevamente usando la posición fija, pero no importa lo que use (superior o inferior, con una columna de altura completa o no), no funciona. ¿Hay otra solución? ¿Quizás algo de JS?
Puede usar position: sticky; y establecer un valor superior:
body{ display: flex; margin: 0; } nav{ position: fixed; top: 0; left: 0; right: 0; background: #ffc3d9; height: 50px; } section, aside{ margin-top: 50px; width: 50vw; } .block{ display: block; width: 100%; height: 200px; } p{ margin: 10px; position: sticky; top:50px; } <nav> </nav> <section> <div class="block" style="background:#ffff61;"> </div> <div class="block" style="background:#61fff1;"> </div> <div class="block" style="background:#f561ff;"> </div> </section> <aside> <p>Cat ipsum dolor sit amet, really likes hummus but put butt in owner's face spend all night ensuring people don't sleep sleep all day proudly present butt to human. Behind the couch pooping rainbow while flying in a toasted bread costume in space poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls for carefully drink from water glass and then spill it everywhere and proceed to lick the puddle meow. Disappear for four days and return home with an expensive injury; bite the vet i like frogs and 0 gravity why can't i catch that stupid red dot leave buried treasure in the sandbox for the toddlers so with tail in the air or catch mouse and gave it as a present.</p> </aside>Finalmente usé JS
if(window.innerWidth > 600){ var element = document.getElementById("scroll-text"); let toScroll = element.scrollHeight + element.offsetTop; if(toScroll > window.innerHeight){ toScroll += 60; window.addEventListener("scroll", (e) => { let windowScroll = window.scrollY + window.innerHeight; if(windowScroll > toScroll){ if(!element.classList.contains("fixed")){ element.classList.toggle("fixed"); } }else{ if(element.classList.contains("fixed")){ element.classList.toggle("fixed"); } } }); }else{ element.classList.toggle("fixedtop"); } }.fixed es la parte inferior fija 0, .fixedtop es la parte superior fija. Funciona bastante bien. Probablemente no sea la mejor manera de hacerlo, pero funciona, ahah.