Fixed Positioning for Scroll Reveal Effect

Hello, I’m trying to replicate an effect found on the Stanford site: https://www.stanford.edu/ wherein a splash image seems to appear on top of the actual content.

I managed to get a splash image on top of another div (it’s at http://test-dda31a.webflow.io/) that has fixed positioning. But for some reason, I cannot see the entire height no matter what value I give the height. I don’t know if I’m missing anything or it’s just a limitation in Webflow. Please help!

I cannot see the entire height no matter what value I give the height.

fixed → always stays in the same place even if the page is scrolled.w3schools
If you give an element fixed = no scroll movement for this specific element. The trick in your reference (inspect element)

[hero-img]
[main]

The main has toggle class (with/without "class=“fixed”). Class fixed decleration:

#main.fixed, main.fixed {
        position: fixed;
        overflow: hidden;
        top: 0;
        z-index: -1;
}

Before scrolling (main fixed)

<main id="main" tabindex="-1" class="fixed">
...rest of the code

After scrolling end (When the img scroll end - the fixed remove)

<main id="main" role="main" tabindex="-1" class="" style="margin-top: 0px;">
...rest of the code

custom code

How to get this on webflow. I don’t think you have class interactions (see this wishlist) - but by custom code you could solve this (webflow already use Jquery so any Jquery code you find will work)

What custom code? try to find codepen (to solve this in Forum Q is more for freelancer job)

hero-image FILL viewport

google it or try this:

Related webflow links:

Thank you for taking the time to answer & do a quick demo! It seems I still have more that I need to learn to pull this off.

Hi. Try to follow this example: If you succses with this - you start to know how to combine webflow with custom JS (Open demo site)
https://webflow.com/website/mixitup-filtering

Again - maybe this is a task for freelancer (No way to solve this by forum Q).

Also if you want this is great course:

I believe this is possible without custom code.

Just make the second section fixed. And once it scrolls in to view let the fixed section be replaced by a non fixed duplicate.

I’ll look in to this a bit more when I get home.

1 Like

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.