Positioning Sticky Elements

Design help General
1

Hi,
I need help with the layout of my website. I am trying to create a homepage with elements (the car and ‘home text’) that keeps the same position in the viewport when the user scrolls down. I am also using an interaction to make the car slowly move towards the centre of the screen as the page is scrolled.

My problem is that when I try to use a sticky positioning on ‘BG img flex’ it stays relative to ‘body’ when I believe it should be relative to the section it is in.
Secondly, is there any better/easier ways to place the main text on the home page in front of the background image? I may end up using another image behind the car in the background that moves the opposite direction on scroll.
I may be doing everything wrong because I am not very good at using Webflow yet so please tell me. :laughing:

Your help would be very much appreciated. Thanks :kissing_heart:

Here is my site Read-Only: LINK

2

Good afternoon @MatthewSpiegelhalter and welcome back to the community forum.

I have created a short video to help you with your issue. Hope this helps and Happy Designing!!!

CloudApp

4

@MatthewSpiegelhalter

Were you able to get the video to play? I didnt see an issue on my end.

5

Yes, I just managed to get the video to play, I had to download it. Thanks a lot for talking me through that! I have another problem now since the overflow is turned off the user is able to scroll to the right to see the whole image of the car, which I don’t want to happen. Is there any way of turning off overflow but still keeping the sticky positioning?

6

Unfortunately no. What you could do tho is place that image within a second div and add an overflow hidden to that element.

Basically, place the BG image within its own div block, add your margin styling to that div and you will eliminate the horizontal scrolling.

I just did that and it works fine.

1 Like
7

@QA_Brandon Thanks a lot for helping out! I have a couple more questions, how can I place the text div block over the div block with the image in it.
Also, how can I place another background image behind the car so that it can have interactions?

8

As for the other image behind BG image, use absolute positioning.

You would absolution positioning for both options.

1 Like
9

@QA_Brandon Thanks for all of your help.

1 Like