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 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)