Sou Brasileiro e rodei esse youtube para aprender a fazer essa integração, parabéns, é meio difícil aprender sem saber inglês, mas consegui, obrigado pelo tutorial!
how would this work for mobile? im doing this but on mobile they are still side by side and its too small.... is there a way to make the sticky side sit on top while the right side is centered?
Can you do something like a nav-bar on the side? Same layout but like with links to different sections to the page and also highlighting that section title.
Yes, you can replace this sticky div with an actual nav and style it, give an ID to each section you want to scroll to, and then assign each link in the nav to the IDs you gave. Good luck!
When I create the div block @ 3:56 it doesnt go full width of the screen but rather the width of the main container. How do I fix this seeing that I selected Body
I find that it it is best to clear out the stickiness at the break point for mobile. At that point, there is simply too much to try to fit on a screen. You'll need to reduce a lot of the padding and adjust the design to look nice on mobile.
Hey Caler. I have followed this video to the letter, watched it twice and still it does not provide me with a sticky element. I have 100% followed the instructions, is there anything on the wider site that could be causing this issue?
Way late but might help someone: I was having a similar issue until I adjusted the vertical-align settings on main container to "start" instead of "stretch"
Thank you for this tutorial 😭❤
hands down the best tutorial about sticky!
Wow, thanks!
Thanks!! Hopefully, we can see more of Webflow animation and layout tutorial.
More to come!
@@CalerEdwards hope so
Smashed it! Good job dude, tried it out and looks great... you also covered off z-indexing without meaning to! Thanks
Glad you liked it!
Your tutorials are so damn good. Thanks for making these and keep up the fantastic work!
Sou Brasileiro e rodei esse youtube para aprender a fazer essa integração, parabéns, é meio difícil aprender sem saber inglês, mas consegui, obrigado pelo tutorial!
how would this work for mobile? im doing this but on mobile they are still side by side and its too small.... is there a way to make the sticky side sit on top while the right side is centered?
You rock Caler!
Thanks! :D
Great tutorial! Does this work well for mobile version also?
Mate! Amazing tutorial and approach how you do it, build it, everything! Please keep going!
Cool layout! Keep it up!
Great tutorial bro! Thanks a lot!
Very nicely explained.
Nice one Caler. We want to see more layout video.
You got it!
this is very helpful, thank you!
4:44 is where the magic happens
Can you do something like a nav-bar on the side? Same layout but like with links to different sections to the page and also highlighting that section title.
Yes, you can replace this sticky div with an actual nav and style it, give an ID to each section you want to scroll to, and then assign each link in the nav to the IDs you gave. Good luck!
Can u develop navigation bar too?
so damn great man, really helpful and understandable. Keep it up!
thanks, how do you add headings, txt etc without having to drag it from the left panel? this is so much easier
THANK YOU!
perfect man, thanks
how would i get the text to change when i reach the second card on the right and so on?
can we have a sticky horizontal progress bar/breadcrumb on scroll?
I will see what I can do :D
Thank You :)
How does this work with different views such as mobile?
Hi! Thank you for tutorial! Why don't you use a container with max width instead of div block?
Thank you for the amazing tutorial. Can you please make more Webflow vids? 💜
More to come!
How do I do this with a image in the back? Like I text to come up of the image as I scroll
great
Is there a way to centre the 'right-card' horizontally in the page and then having 'left-card' just take up the remaining space available?
Great one!
Thanks!
When I create the div block @ 3:56 it doesnt go full width of the screen but rather the width of the main container. How do I fix this seeing that I selected Body
How to make a mobile version of this...?
how does this work on mobile? how does the responsive aspect work?
I find that it it is best to clear out the stickiness at the break point for mobile. At that point, there is simply too much to try to fit on a screen. You'll need to reduce a lot of the padding and adjust the design to look nice on mobile.
having trouble with luxy.js and sticky. sticky not working with it
This doesn't work anymore...
Does this program give you the code as well?
Yes! You can export the code if you have the right account plan.
GOD
Does it look the same on mobile?
4:42 what you came for
Hey Caler. I have followed this video to the letter, watched it twice and still it does not provide me with a sticky element. I have 100% followed the instructions, is there anything on the wider site that could be causing this issue?
Make sure none of your parent elements are set to 'overflow: hidden'. This causes 'position: sticky' to stop working.
Give your Left class a Max height. About 500px
Way late but might help someone: I was having a similar issue until I adjusted the vertical-align settings on main container to "start" instead of "stretch"
@@brendanvanbiljon3861 Thank you guys, that was really helpful
cool
Thanks :D
@@CalerEdwards ヾ(^▽^*))) I was wondering How to do that.
I swear I try this and my webflow just doesn’t do this, I can only achieve the effect using fixed but then my footer looks weird.
Oh! I think it’s because I didn’t give my left div an appropriate height
web flow vs code which is better u think
Great tutorial master! Thanks a lot!