How to make pinned header disappear on scroll and only reappear when I reach the top

Question:
Hey Guys,

So in Editor X, I am able to pin my header and have a scroll transition effect that allows the header to disappear when I scroll down 100% of the viewport. The issue is that when I am down the page and I scroll up the header reappears and as it is a transparent header it gets lost in all of the text of the website. Is there anyway to adjust it’s reappearance so that the header only shows again once I scroll to the top of the page or back to that initial viewport where it disappeared?

You can also view my site here (Password = Rhyba123)
https://www.rhyba-engineering.com/blank-2

Here is how it appears when I scroll up from the middle of the page:

Product:
Editor X

What are you trying to achieve:
[Explain the details of what you are trying to achieve. The more details you provide, the easier it is to understand what you need.]

What have you already tried:
I already tried this in the Global Js, but it is not working:

import wixWindow from ‘wix-window’;

$w.onReady(function () {
wixWindow.onViewportLeave(() => {
$w(“#header”).collapse();
});
});

$w.onReady(function () {
wixWindow.onViewportLeave(() => {
$w(“#header”).collapse();
});

wixWindow.onViewportEnter(() => {
$w(“#header”).expand();
});
});

Additional information:
Thank you so much for your help, in advance!

A very old example of how to show and hide —> HEADER
https://russian-dima.wixsite.com/meinewebsite/header

Thanks for your reply! But, this is not what I am after, I want the header to hide on scroll not on click…

I have the exact same issue and trying to archive this for some time now. Have you been able to solve this?

Regards
Dario

The most important thing is to know how to hide and shoe the header, the rest is just some king of little adjustment.

To let it work onScroll you can use the the following 2-options…

  1. You can either use the getBoundingRect-function…
    getBoundingRect - Velo API Reference - Wix.com

  2. …or you use the → VIEWPORT <— of each element

myElement.onViewportEnter()
myElement.onViewportLeave()