What happened?
Wix announced that there onViewport events are not triggering on the sticky header anymore. You can read the official forum post here:
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:
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
Comments