â–Ľ
Streaming live at 10am (PST)

Vincent's ace Sticky Scroll not showing all content before scrolling down

Hi Guys

Having an issue with Vincents Sticky scroll not showing all the content before exiting the viewport an scrolling down the page

Could any body help me with this? Would be much appreciated


Here is my public share link: https://preview.webflow.com/preview/hedge-re?utm_medium=preview_link&utm_source=designer&utm_content=hedge-re&preview=12f4eaba37fb2d2bc134ff98277e385a&pageId=5e590287a697726ea2022b3d&mode=preview

https://hedge-re.webflow.io/current-availability

@vincent you recon you might be able to point me in the right direction champ?

Also you can pass the 400 vh and vw values to 500 to slow down the scrolling a bit.

1 Like

My man, thank you so much, would I have to set another transition for mobile and reduce that number back down?

I don’t really know, try for yourself. you can’t just change the value for mobile, you’ll need to deactivate that interaction for mobile, and create a duplicate that you’ll activate only for mobile, then alter the values for it.

That’s what I was thinking I could, also, do you think there could be a way to get this to extend dynamically according to the content loaded into the collection? or is that one bridge too far? :grimacing:

Thank you for getting back to me and for creating this to clone in the first place :+1:

Hi Vincent, do you have any idea why the text would disappear on mobile and touch devices when scrolling?

It’s a very legitimate need. And technically, it would be very easy! The logic is this: calculate how much room you need for 1 item, then calculating the dimensions of elements and the values inside of the IX is easy. And There’s a CSS feature called Calc that’s there to help having dimension and values dynamic.

So i’m sure it’s already possible with JS. Now, I’m also sure that in the near future, we will be able to use several things in pretty much all fields in Webflow:

  • CSS Calc
  • values from fields from the CMS
  • CMS values such as the number of items, the number of collections, the size of any field etc…

That just makes sense, and that is just what will make the #nocode thing possible. It is only a matter of time, it’s not an eventuality.

1 Like

You’re very welcome. This particular behaviour is pretty special because it’s not just a wow effect, it is something that is very useful to balance and present information on a page, it also makes a lot of sense on mobile where scroll is legion. i’m very happy that it found such a broad audience.

1 Like

Thanks @vincent I am having trouble with text disappearing on scroll within the sticky viewport on touch devices… have you come across this before?

This is great, thank you

I have just checked your CMS version of the Sticky scroll and you don’t seem to have the same issues that I currently have with text disappearing on scroll? I have tried changing from position absolute text to static but still get the same issue… could it be in my setup somewhere else do you think?

Think I have sussed it, it didn’t like text within an absolute positioned div with the a block, but is ok within the gradient div. Thanks again for your help

Hi Vincet, hope you don’t mind me adding to this thread, but I have a had a request to add a modal to your sticky scroll content but I am struggling with getting the position fixed to work with the collection list element in the sticky scroll? Do you think this is achievable?

https://preview.webflow.com/preview/hedge-re?utm_medium=preview_link&utm_source=designer&utm_content=hedge-re&preview=12f4eaba37fb2d2bc134ff98277e385a&pageId=5e7cdfce97387353bd6f2ba1&mode=preview

https://hedge-re.webflow.io/current-availability