I’m working on a site - I have some text that stickies in the correct position, but I would like to overlay an image so that it remains centred on top of the text as you continue to scroll.
Currently the image continues to move upwards, is there a way I can ensure it stays in the centre of the screen?
I’d ideally like it to stay like this until the next section scrolls up.
Any help would be greatly appreciated! Thanks
Hi, Chris. Is this the effect you’re looking for?
If so, I accomplished that by centering the bottle in a section that had a height of 100vh and made the section sticky.
Note: I didn’t spend any time trying to make this look good on a variety of screen widths, so the bottle may be huge or small or just right, depending on the width of your viewport. 1500px works fairly well.
Thank you so much Jim. Really appreciate the help! This worked perfectly.