Hi Webflowers,
I am trying to incorporate a sticky section to a website with an iFrame, however, I’m not nailing it. When you reach the sticky section, I would like you to scroll through the iFrame section (website presentation) and once you reach the end you scroll through to the next section, much like how Webflow is doing it in their Made in Webflow area. I hope one of you wizards out there is willing to lend me a hand, Cheers.
Please let me know if the above doesn’t make sense ; )
This option might be possible but without using the sticky property.
An iframe section will naturally scroll internally to the end of a page and then your actual site will continue to scroll. If your iframe div is set to 100% width & 100vh height, this will force your viewer to scroll through the iframe section. Give this section an ID of “section” and then use this jQuery script which will bring the full iframe section into view:
Hi Port_of_Folio,
Thank you for your reply, much appreciated. However, ideally, I don’t want the iFrame div set to 100% width & 100vh height as this would take away from the effect I am trying to create. I am basically trying to achieve this (Presentation Kit - Webflow) but my design does not stick and does not continue to the next section when the iFrame scroll is done. Sorry, still in the learning phase of Webflow.
In this sample page, you’ll notice that if your cursor is outside of the iframe you will scroll past it. When your cursor is inside of the iframe it will scroll internally to the end iframed page before returning to the page scroll. So this sample doesn’t really work in the way that you’ve described, or hoping to achieve. To truly force the user to scroll the iframe first, you need to force their cursor to be within the iframe. And even then, they’d still be able to page scroll using their space bar or arrow keys.
