Shrinking header

Discussion Ask a question
,
1

So with he help of a couple of other Wix Pros who are way ahead of the curve, I was able to create a shrinking header. However, the same does not seem to work on other pages. If I am on the main page and scroll down, the header shrinks and when I access the other pages from the “shrinked” header, the other pages would also have the same characteristics. Which is fine. BUT when I scroll up the header does not go back to its full size. ANOTHER BUT, when I go straight to the other pages from the main page with the full-sized header, the other pages would also have the full-sized header (which is also fine) the thing is even when I scroll down, the header no longer shrinks. This is the unfinished published site - https://mnfwebsolutions.wixsite.com/ehtac

2

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.

3

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?

4

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

5

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");
	});
1 Like
6

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