Block heading when scrolling

I Need Help
1

Hi, it’s possible in blocs to recreate the animation that you can see on this website? https://4lph4.webflow.io/

“Design-driven Strategy-led” remain locked and the right text (01 Explore, 02, 03,04) scroll

2

Yes you can recreate that effect.

In Blocs you can use a Bootstrap class called sticky-top to do the same thing.

You will need to unset the overflow on the page-container that Blocs creates using some CSS for it to work. eg… something like this in the page header.

.page-container{overflow-x: unset;}

You end up with…

5 Likes
3

Hi all,

Anyone else using this that I could have a look at it working if using images?

I messaged @PeteSharp today (or yesterday for him!) and he gave me the css of .page-container {overflow: unset;} for blocs ( i tried the one on video too - and that is not working)

I have done everything correct - or least I think I have and when i go to view i get a white blank site.

Thanks all.

Ade

4

Hey @AdieJAM , it works just as I suggested. Can you explain what you have done?

You now have to use

.page-container {overflow:unset;}

2 Likes
5

Hey, thanks @PeteSharp - it looks good, id like to play around with that and see if thats gives me an option for what im looking at.

1: Structure 2 column
2: div container, with an image in it. created in class manager: .sticky-top for this div.
3: Page header :

.page-container {overflow: unset;} 4: Text on the right hand column 5: Nothing, blank screen. I know I am missing something very simple somewhere !!!!
6

You don’t need the div, just add sticky-top to the image

1 Like