Sticky Header (Big & Small Header) in WIX Website

What happened?

WIX announced that there onViewport events are not triggering on the sticky header anymore. You can read the official forum post here:

https://www.wix.com/velo/forum/coding-with-velo/fixed-frozen-header-example

The onViewPort event is the event located in the properties panel of the strip element that is being used to trigger a specific code to perform the animated function, also known as: the animated header, the frozen header, the sticky header.

Who was affected

Almost 100% of sites were affected expect one. The tutorial site for the Sticky header is still working. You can view it here: Sticky Header | Demos by Tanishq Sundhan

To add Sticky Header (Big & Small Header) in WIX Website View Tutorial Video

Code Used:

export function anchorheader_viewportEnter(event) {
 $w("#topStrip").hide();
 $w("#bottomStrip").show();
}

export function anchorheader_viewportLeave(event) {
 let fadeOptions = {
 "direction": "top",
};
 $w("#topStrip").show("slide", fadeOptions);
 $w("#bottomStrip").hide(); 
}

In the above code;

• topStrip- Small Strip (hidden and Arrange below the Large Strip)

• bottomStrip- Large Strip (Arrange front to all strip)

• anchorheader- Anchor used.