Code Queen

Jul 16, 20202 min

Frozen header is not working on Wix, Wix Code and Corvid

Updated: Sep 14, 2020

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/corvid/forum/community-discussion/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.


Good to Know #1

Who was affected

Almost 100% of sites were affected.  Some of the Code Queen's tutorial sites were affected as well, expect one. The tutorial site for the floating header is still working, as of May 25th, 2019.  You can view it here:  https://codequeen.wixsite.com/floating-header
 

Code Queen Tutorial sites that are not working:

https://codequeen.wixsite.com/animated-header

https://codequeen.wixsite.com/new-shrinking-header


Good to Know #2

Wix Corvid Forum Post by Wix

Wix has not released much information regarding why this suddenly happened, when or if it will be fixed.  Wix simply offered an alternative to fix the problem at hand.  You can read their official post here:   https://www.wix.com/corvid/forum/community-discussion/fixed-frozen-header-example


Code Queen Solution #1

Add & Trigger an Anchor

The first time the Code Queen created a shrinking header, she accomplished this by attaching an anchor to the header.  This was much of a surprise to Wix as it was to her because Wix said it was not possible. You can attempt to correct the problem of the onViewPort from the header by adding an anchor to the header.  If you successfully attach the anchor to the header, then you only need to do this once.  If you are not so lucky, then you will have to add an anchor on every single page that you need the animation (and you will also need to add the code to each page, as well).

Here is a copy of the original Totally Codable website that still has the attached anchor to header today:  https://codequeen.wixsite.com/attached-anchor
 

Original Code Queen Video Tutorial from 2017

Youtube Video:  https://www.youtube.com/watch?v=8yCjNVEzJxg

Tutorial Site: https://codequeen.wixsite.com/menu


Code Queen Solution #2

Add a Transparent Strip to Header

The second method you can try is the one that Wix suggests.  In additional to the strips you have added to your header, add a 3rd but transparent strip to use as the trigger for the code.  This means remove the onViewPort events from your header element and add them to the new strip instead.  This way it acts the same as an anchor, except a strip can be attached to the header so you would not need to add it multiple times. A brief explanation is found on Wix's official code forum post:  https://www.wix.com/corvid/forum/community-discussion/fixed-frozen-header-example


Author

by Code Queen

Stuck on a project? Need help on finding other workarounds? Hire Code Queen, LLC! Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.

Online Booking: Discovery Session

Contact Form: Send project details

    7000
    9