Create a sticky section that starts scrolling once it hits the next section

Site URL: https://oriole-gar-h86y.squarespace.com/

Basically, I would like to know how to achieve this scroll effect in my website: https://www.zendaya.com/

Where the background with the name Zendaya stays fixed until a certain point, and then along with the image, the below section sweeps it out of view once you continue scrolling. 

20 minutes ago, MadihaSyed said:

Basically, I would like to know how to achieve this scroll effect in my website

The block containing the H1 headline ("Zendaya") has simply been fixed in position using Custom CSS (using 'position:fixed'). this stops it moving up with the rest of the section (the image). 🙂

 
With the CSS

Without the CSS

Did this help? Please give feedback by clicking an icon below  ⬇️

Hey, thanks for the help! I did fix the position in the CSS, but now its overlapping across the entire page over the rest of the sections? is there a way to put it behind all of the other sections so its not visible after scrolling? Thanks!

Hey there, did you get this to work? I'm having the same issue! Thanks!

On 8/10/2022 at 3:15 AM, Adr_81 said:

Hey there, did you get this to work? I'm having the same issue! Thanks!

Can you share link to page where you have problem? We can help easier

Hey @tuanphan thanks for getting back in touch.

Sure - it's here...

https://jaguar-raccoon-nwkn.squarespace.com/

PW BenEditsMusic123

Client is trying to achieve the same effect as the Zendaya site, where the BEN EDITS MUSIC text is fixed and scrolls behind the image.

I've been using this code...


//--Scroll Behaviour--//

#block-yui_3_17_2_1_1660167861306_308882 {
position: fixed;
width: 92%;
height: 200px;
top: 100px;
}


Which now seems to be working. Previously I had the text in a different font, and it all seemed rather glitchy - it kept extending out at the side after working initially? All seemed very odd.

Whilst i've got you, I don't suppose you know why some of the corners aren't appearing rounded within the FILM & TV section?

First example below...

 

//specify with the class name
.titles1:hover:before {
  content: '';
background: url('https://static1.squarespace.com/static/62ed106ac3eadf037cbe518d/t/62f2794b1cf4867de0901e3d/1660057931457/Ridley+Jones.jpeg');
  background-size:contain;
  background-repeat:no-repeat;
  border-radius: 20px;
width: 25vw; 
left: 50vw; 
height: 30vh; 
margin-top:-50px;
position: absolute;
opacity:1;
transition: transform .4s cubic-bezier(.86,0,.07,1),opacity .4s cubic-bezier(.86,0,.07,1);
   transform: translate3d(.33333vh,-11.66667vh,0);
  -webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
            animation: flip-in-hor-bottom 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;

      
}

// End Ridley //


Thanks again,
Adam