So basically, I would like to scroll images and text at the same time, but when the bottom of the text shows up, I would like it to stop, while I could keep scrolling images.
I tried to use sticky position on the text, but it scrolls only when I scroll all the images. I maybe used it the wrong way.
In this example, I’ve replaced images by color boxes.
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>Is it possible ? If yes, how ?
EDIT: I tried again using sticky position, but no matter what I use (top or bottom, with a full height column or not) it doesn't work. Is there an another solution ? Maybe some JS ?
You can use position: sticky; and set a top value:
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>I finally used 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 is fixed bottom 0, .fixedtop is fixed top. It works quite well. It's probably not the best way to do it but w/e it works ahah.