Need help creating a floating header

Ask the community
,
1

I’m sorry if this is a silly question but I am very new to the more advanced features of Wix!

If you go to my website and scroll down a little, you will see that I have two skinny lime green strips: one called “My Work,” and the other called “Pocket Projects.”

What I want: as you scroll through “My Work,” the header that says “My Work” sticks at the top of the page. And as you scroll through “Pocket Projects,” the header that says “Pocket Project" replaces “My Work” and “Pocket Projects” becomes the header instead.

I am currently having difficulty even getting “My Work” to stick as a header. I have followed the instructions from this video (from 0:00 to 5:10) but nothing has changed.

This is what all the code I have looks like:

$w.onReady(function () {
 //TODO: write your page related code here...\
});

export function floatHeader_viewportEnter(event) {

    $w('#topStrip').hide(); //hidden on load
    $w('#bottomStrip').show();

}

export function floatHeader_viewportLeave(event) {

    $w('#topStrip').show();
    $w('#bottomStrip').hide();

}

export function anchor3_viewportEnter(event) {
 //Add your code for this event here: 
}

export function anchor3_viewportLeave(event) {
 //Add your code for this event here: 
}

Is it the code that I got wrong? There are no “errors” when I’m in the code editor itself. I have labelled both strips correctly.

Any ideas on what I could be doing wrong?

Thanks in advance!

2

You can see Wix example here.
https://www.wix.com/corvid/example/sticky-header

The video from Nayeli (Code Queen) is from 2018 and if you read the info on the page you would have seen that there was an issue with this which has been addressed.
[ WARNING: WIX REPORTED ERRORS ON THE VIEWPORTIN EVENT IN THE PROPERTIES PANEL ON ALL LIVE WEBSITES. READ OUR TUTORIAL ARTICLE TO LEARN HOW TO FIX THIS.]
https://codequeen.wixsite.com/floating-header
https://codequeen.wixsite.com/new-shrinking-header
https://codequeen.wixsite.com/animated-header

3

Hi, I’ve tried that video but it wasn’t working for me, either.

I did read the info on the page. I tried to read the troubleshooting article but it seems it was deleted. There is nothing there.

Do you have any ideas on what I should do?

4

Okay, I’ve adjusted the code a little and I’ve gotten it to work, for the most part.

Now, however, when I scroll back up, the header doesn’t disappear–it stays at the top of the screen. It also appears a little too early. Any ideas on how to fix this?

5

Do your code as like in the Wix example here and see what you get.
https://www.wix.com/corvid/example/sticky-header

$w.onReady(function () {
	// To make this Code work in all of your site pages,
	// Move these lines into the the 'Site Code' panel
	$w("#floatHeadert").onViewportLeave(() => {
		$w("#topStrip").show();
		$w("#bottomStrip").hide();
	})
	$w("#floatHeader").onViewportEnter(() => {
		$w("#bottomStrip").show();
		$w("#topStrip").hide();
	})
});

With the code above, the onViewport events are added to the code itself, so you don’t need to add the onViewport event from the properties panel.

If you would prefer to use the existing export function, then just replace the onViewport lines with yours and make sure that they have the onViewport functions added to them in the properties panel.

Finally, with regards to the anchors in your page code, what are they there for as currently they are doing nothing when the enter and leave.

export function anchor3_viewportEnter(event) {
// nothing here to do anything //
}

export function anchor3_viewportLeave(event) {
// nothing here to do anything // 
}
6

Also, please note that when they mention about an anchor being used here…
First, we made the white header hidden on load and added an anchor, which we’ll use as a trigger point for the switch and add to it two event handlers—onViewportLeave and onViewportEnter—to change the header background as users scroll through the site.

That this anchor is in fact a strip across the page and not actually an anchor, the strip is being used as the anchor point here.

Off the top of my head, I think that the error was that when the browsers got updated, the previous example which used an actual anchor ended up getting broken.

This was mentioned in this forum and there was an old post about it which gave you the correct way.
https://www.wix.com/corvid/forum/tips-tutorials-examples/fixed-frozen-header-example

This is not a one off issue, devs from different browsers love to bring out updates that break things for other companies and they have to bring out fixes for it :wink:

See here.

971×505 204 KB

7

Plus, as mentioned in the old post, this can be done without code.
https://support.wix.com/en/article/changing-your-header-design

8

Thank you! I deleted the code that had to do with the anchors.

Unfortunately, what I need is a little more complicated and I don’t think I can do it without code (although I sincerely wish I could).

I am now having an issue where there is a red dot next to the first line of code, and it says " #headerTranstionPoint is not a valid selector." I have checked and rechecked, and my strip name is correct–I even tried copying and pasting.

Is there a particular reason this error message is showing up? Could it also be the reason the header is not disappearing when I scroll back up?

And I am also a bit confused on your comment: are you saying I should replace my current code with the code you have in the comment? Or should I add that code in and change the strip names?

Sorry for all the questions!!