Streaming live at 10am (PST)

Sticky Scroll Attempt left a "Ghost" 100vh at bottom of page?!

Hello,
I’m working on a project with sticky scroll on sections, everything was going great with 100vh div blocks (ABS) over the scroll container to get the picture full vh whole time it “stuck”… then not sure what happened but there is a 100vh at the bottom of the page… nothing in it and there is no height on any section that explains the “ghost” space!.. below is the view link, Thank you for your time and I appreciate ANY help.

https://preview.webflow.com/preview/i-80-real-estate?utm_medium=preview_link&utm_source=designer&utm_content=i-80-real-estate&preview=fae755ee600217012703c68034264224&pageId=602a4e11eca6640904ae21b1&mode=preview

Hey Levi.

As I can see, you are setting each div on a 200vh to achieve the scrolling effect.
This approach will automatically create an extra 100vh blank space on the last div, because there is no image to slide in anymore.

A simple fix is to set the margin to -100vh on the last div to get rid of the blank space and keep the scrolling animation working at the same time until the end of the page is reached.

Hope it helps.

Thank you so much for you time and help, it worked!
Just one more quick question… how did you know that?
I truly appreciate thank you.

Any help on how to add a footer without messing with the sticky scroll and -100vh on last section?

Hey Levi.

I just quickly debugged it with Google Chrome Inspector.

However, I have seen you updated your site and found there is still a scroll active when the last picture is completely in the viewport.
Obviously you are using a div block with a fixed height of 100vh on every section to wrap a heading inside of it.
On the last div, there a two div blocks (Div Block 18). I assume this might be a mistake. Furthermore you are not even using a heading inside the last image.

So I suggest you the following, but first, kindly remove the margin of -100vh I mentioned above.
Negative margin should always be kept in mind when you add remove other elements after, so there might be an issue with the footer now.

If you do not want to use a heading inside the last picture:

  • Set VACAVILLE Section to 100 vh and delete 2x “Div Block 18”

If you gonna add a heading to it and there might be still an issue, please reach out.

Thank You for your help and time, i appreciate. My goal for this site would look like this… small video I linked below to demonstrate.

below is my preview link Im trying to do this with the second page called “Page Two”
https://preview.webflow.com/preview/levis-awesome?utm_medium=preview_link&utm_source=designer&utm_content=levis-awesome&preview=fae755ee600217012703c68034264224&pageId=602a4e11eca6640904ae21b1&mode=preview

I appreciate all the time anyone takes to help.! special thanks to Marius for help and possible future help. thank you@!

Community is here to help each other :muscle:t3:

I am sure, I have seen a proper and professional solution of what you want to achieve in the #madewithwebflow area.
Take your time and maybe you find a - maybe even cloneable - project, that fits your needs.

1 Like