Changing Header on Scroll

Ask the community
,
1

Looking for help here as I cannot figure out where I am going wrong. I am trying to change my header to transition to something slightly different as I scroll down the screen. I followed this tutorial to a T and I still cannot get it to work. My code is in the Site code, not the page.

Here is what I did:
*created a small strip
*created a larger strip(size of header)
*added my strip elements
*Added an anchor
*then I dragged everything up and attach to header
*made the small strip and it’s associated elements hidden on load
*dragged the Anchor to y: 73 (the bottom of the small strip that I want to display on scroll and hide the big strip and elements in the header)
*anchor properties were edited to anchor4_onViewportLeave and anchor4_onViewportEnter
*header is frozen

my code does nothing… as evidenced here
https://brittanynsoos.wixsite.com/bffv2

Here is my code entered into the Site Code

// For full API documentation, including code examples, visit Velo API Reference - Wix.com

$w.onReady(function () {

});

export function anchor4_onViewportLeave () {
$w(“#hiddenStrip”).show();
$w(“#hiddenTitle”).show();
$w(“#hiddenMenu”).show();
$w(“#largeHeader”).hide();
$w(“#leftFlower”).hide();
$w(“#rightFlower”).hide();
$w(“#BigTextBFF”).hide();
$w(“#eliotMaine”).hide();
$w(“#siteMenuStrip”).hide();
}

export function anchor4_onViewportEnter () {
$w(“#hiddenStrip”).hide();
$w(“#hiddenTitle”).hide();
$w(“#hiddenMenu”).hide();
$w(“#largeHeader”).show();
$w(“#leftFlower”).show();
$w(“#rightFlower”).show();
$w(“#BigTextBFF”).show();
$w(“#eliotMaine”).show();
$w(“#siteMenuStrip”).show();
}

2

For you Anchoir, On the Wix Code Properties Window, have you press the + button to add an OnViewportEnter and a OnViewportLeave Event ?? Screen capture to help.

You will also need to copy and past the anchor and manually add the events for each single one of your pages, since we can’t attach an anchor to the header

When you will add the event, it will automatically put some lines of code in the ‘page’ section, wich you just have to delete since you already have the full code on the ‘Site’ section

I had the same issue but manage to make it work (proof) : www.kassyarts.com
Hope it is helping!

584×844 26.5 KB

3

I wish that was my issue, but it doesn’t seem to be…

1440×900 324 KB

4

I finally figured out my issue!! Issue was that in my code I capitalized the ‘v’ in anchor4_onViewportLeave and it should have been anchor4_onviewportLeave. Facepalm.

5

Ahah :joy: it is really often that kind of simple mistake! Glad you found :slight_smile: