Shrinking header

Hi Mariedyth,

Not sure if you got it to work yet, but you can visit our blog that describes how to do what you are looking to do, there's also a short video that shows step by step how to do it.

https://www.dkm.agency/single-post/2017/12/22/Create-An-On-Scroll-Animated-Header-Using-Wix-Code

Hope it's you out!

David

Hi Mariedyth,

Make sure to add the anchors to all of your pages. Since your code relies on them to show and hide the header.

Also, you should do a check before you try to hide/show the header to make sure it is ready to receive the command, otherwise the header will break occasionally when the user moves between states too quickly.

You can await for the promise to resolve:

$w("#myElement").show("FadeIn")
	.then(() => {
		console.log("Done with fade");
	});

I made the shrinking header work in each page by putting in the code in each page. The site code only seems to work on the main page. Is there an easier way of doing this?

Here's the site https://mnfwebsolutions.wixsite.com/ehtac

Hi Ido,

Thanks for your quick response. So now I have taken off all the codes from the pages and kept the shrinking header code on the site. The result is the same. What am I doing wrong?

Hello Mariedyth,

I noticed that on some pages you interact with columnStrip6 and columnStrip7 using page code as well as the site code.

Make sure that your page code is not interfering with your site code.