Question:
Show header section (not global header) only once per page load and make it not visible/accessible after scrolling out of viewport
Product:
Editor X.
What are you trying to achieve:
I have a page, where the header (not the global header section) should only be visible for the first time the page loads. Once clicking a button in the header, the user is sent to an anchor on the page, which is located exactly underneath the header. If I collapse the header, once it leaves the viewport, that of course changes the layout of the page and automatically moves the elements up by the height of the collapse header. I want the user to not be able to scroll to the header again.
The header section is set to auto height. If I offset the header (which is inside a container) in the editor manually by -100vh, it makes the section disappear. Is it possible to achieve this automatically as well with Velo or any other way?
Or is there any other way to achieve the header disappearing/making it not accessible anymore without moving the content of the page?
What have you already tried:
I tried using hover animations and moving the element out of the visible range.
I tried various on viewport leave/enter combinations.
Additional information:
Box is 100vh & 100vw
Section height is Auto
Hi there. In my experience with Editor X, the best way to achieve the functionality you’d like is to use Velo to hide the header after scrolling out of viewport. Let me know if you need guidance, I’m a certified Velo developer
Hey guys, thanks for this.
I tried using the hide function already, but that leaves me with a blank space of the size of the header. Still experimenting with it or if you were able to achieve it somehow, would be happy if you could share 
First of all i would say, that your description is confusing and not 100%.
You talk about…
The header section is set to auto height. If I offset the header (which is inside a container) in the editor manually by -100vh, it makes the section disappear. Is it possible to achieve this automatically as well with Velo or any other way?
Also this one is not really clear…
Show header section (not global header) only once per page load and make it not visible/accessible after scrolling out of viewport.
Maybe you want first to show a pic of your setup, which would maybe explain everything.
And furthermore, maybe you want also to show the code which you were trying to run?
You should know, that every little detail will change the code of your solution.
Conclusion:
- So your mentioned → HEADER <— is NOT the main HEADER of your site (MASTER-PAGE).
-Your HEADER is a → CONTAINER (BOX) <— which is placed inside a → SECTION <—?
Is this setup right?
Why not just showing a pic of your setup, which would explain everything automatically (of course showing the IDs of your elements, so everyone can see what kind of element was used).
Do not make it more complicated then it is.
try this. I put the show hide because you mentioned not moving the content on page.
collapsed - Velo API Reference - Wix.com.