Fixed Positioning for Scroll Reveal Effect

[celenajasmin (Celena)]

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!

[Siton_Systems (Ezra Siton)]

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)
https://codepen.io/jdlaplan/pen/lboeD

• https://stackoverflow.com/questions/12558311/add-remove-class-with-jquery-based-on-vertical-scroll
• https://stackoverflow.com/questions/29717119/how-to-change-class-after-scroll-somewhere

hero-image FILL viewport

google it or try this:

[Tutorial] How to make hero section always fill browser window

If you guys/gals are wondering how to have your hero section FILL perfectly in the browser viewport no matter the height of the browser window (usually it is 800px, but some monitors are taller) like in these screenshots below: Taller monitor or browser window: [image] Smaller monitor or browser window (notice the icon on the bottom sticking to the bottom): [image] Method #1 While CSS is typically not very adept at working with browser height (because of document vs. window heights), we can…

https://university.webflow.com/article/how-to-hero-section-using-flexbox

Related webflow links:

https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site
https://university.webflow.com/article/fixed-position
https://university.webflow.com/article/z-index

[celenajasmin (Celena)]

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.

[Siton_Systems (Ezra Siton)]

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:

Using jQuery Plugins Course

[DharmaNode (Michael)]

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.