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)
- javascript - Add/remove class with jquery based on vertical scroll? - Stack Overflow
- jquery - how to change class after scroll somewhere - Stack Overflow
hero-image FILL viewport
google it or try this: