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

501 views0 comments

Recent Posts

See All

disclaimer

a quick note about our website content

Our free and premium content is non-exclusive, meaning you are not the only one with access to the content. You can customize our content to fit your end product. Redistribution of our content is strictly prohibited. This means you cannot make our content available to others as-is, stand-alone products or stock products in ANY LANGUAGE, regardless if you offer our content for free or not.

  • Code Queen Facebook Group Icon
  • Facebook Logo
  • Twitter Logo
  • YouTube logo
  • Instagram Logo
  • Linkedin Logo

© 2021.  All Rights Reserved by Code Queen, LLC.