Not quite, if you preview on any page it initially works but there is only one page and subpages that work if you navigate to then with the menu.
If you want to see my website it is meanwhileontheroad.com and the page that works is the gallery page.
The problem seems to be resolved on a new post I made https://www.wix.com/code/home/forum/questions-answers/sticky-menu-not-functioning-once-navigated-off-the-page
Not sure why it fixes it and the original code worked sometimes, but it does 
Thanks for looking in to this Russell
Russell, thanks for your help! I found an easier way to fix it, it’s over here in case anyone needs help with the same thing: https://www.wix.com/code/home/forum/questions-answers/dynamic-header-menu
To make a simple menu appear when I scroll down is this code not correct? The menu is now sitting inside the header. Please help I am new to this.
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
$w.onReady(function () {
$w(“#Menu2”).hide();
});
export function header1_viewportLeave(menuAppear) {
menuAppear=$w(“#Menu2”).show();
}
Hey all,
I followed the examples given on these topics and got my header to work the way I would like it too.
Disappearing the Main Menu and appearing another smaller menu (inside the header) that stays frozen throughout the website.
Problem is that I want this smaller frozen menu to have a show animation like a Fade In but cannot determine the speed of the Fade In.
Since it takes so long to actually fade in, if I scroll down (activates the smaller menu) the menu starts fading in, but if I scroll back up fast enough that the animation has not finished yet and the Main Menu will show up again while the smaller menu animation is still finalizing.
Meaning the menus will overlap each other.
If I totally remove the animation works fine, but the feel is just clunky.
Any thoughts?
I apologize in advance for English.
I managed after several attempts and got a satisfactory result.
To make Sticky Header / Menu work, create a new website.
Any modifications of the existing page will cause permanent changes in the Menu on other subpages.
Possible restoration from the history of the website.
If I’m wrong, please give me another solution.
Here we go.
We create a blank page with header and footer.
The header1 header bar gives properties:
- viewportLeave
- viewportEnter
We add strip1 (color eg black) and give the properties:
-
viewportEnter
-
hidden when loading the page
We add strip2 (transparent color) and give properties:
- viewportEnter
- viewportLeave
strip1 = small bar
strip2 = large bar
We paste the logo and menu into the strip2 bar. You can add a cart.
How to make a menu everyone knows (simple or hamburger with lightbox)
We paste a small logo and menu into the strip1 bar. You can add a cart.
we set the header1 to a height of 40 px
strip1 to 40 px
(small logo must be smaller than 40 px bar height)
header1 freeze (show on all pages)
We set the color of the header1 bar to one that suits us.
You can add social links or a phone or an advertising slogan to header1.
Below we have two stripes (strip1 and strip2).
In the strip1 bar we have a small logo and menu + eg. Basket
In the strip2 bar we have a large logo and menu + eg. Basket.
strip1 stripe on header1 and let go.
You can not add strip1 to header1.
This should be moved so that strip1 is on header1.
strip2 move so that it is directly under header1 and strip1
Now in the paste section of the Page:
$w.onReady(function () {
//
});
export function strip1_viewportEnter() {
$w("#strip2").hide("FadeOut");
}
In the Site section, paste:
$w.onReady(function () {
//
});
export function header_viewportLeave() {
$w("#strip1").show("fadeIn");
}
export function strip1_viewportEnter() {
$w("#strip2").hide("fadeOut");
}
export function strip2_viewportEnter() {
$w("#strip1").hide();
}
export function strip2_viewportLeave() {
$w("#strip1").show("fadeIn");
}
export function header_viewportEnter() {
$w("#strip2").show("fadeIn");
}
In the preview, we see header1 and strip2.
The effect should be such that when you move the page down, strip2 disappears and strip1 appears in the header1 place.
If we do not see the effect, check the properties given. Sometimes they erase themselves (viewportEnter and viewportLeave).
You can add more transition effects to make the whole run smoother.
If someone finds a better solution, please give me a detailed and detailed description.
Thank you for inspiration and best regards.
Krzysztof (Chris) from Poland
Hey all I have tried the code I but it is so clunky what did I miss. https://seabeeesser.wixsite.com/website
Here is video for that …
The only thing is …the wix editor will not allow anchor in header anymore so you have to copy and paste it on all pages.
I am thrilled to use Wix Code to help downsize my header as you scroll down the page and expand it once you scroll back up. It helps reduce a 170px header down to 40px, allowing a much better viewing experience on smaller desktop screens. However, at present, if an element is displaying in the 130px beneath that reduced header, the transparent header#SITE_HEADER container is displaying over the content, making it impossible to click a link or button. Is there any way to resize the header dynamically?
The site is www.endersisland.com
Hello seabee.esser, could you please share your code?
I’m not able to attach anchor to the header.
Can someone help.
Anchors cannot be attached to the header, Pawan. You must attach it to all the pages. As for me, it is not a good idea to use anchors. Usually, people use strips for the header and you can attach onViewportEnter/Leave to the required strip within the header. It’ll produce the same effect.
For example, place two strips: one which must be shrinked on scroll, second is, for example, with menu buttons which shall stay on the top after scrolling. For this second strip, use OnViewportLeave() to hide the first strip and onViewportEnter() to show the first strip again.
Thanks grayhound72,
I understand anchors cannot be attached to header.
But now the problem the problem is it only show up on the home page.
Let me know what I’m doing wrong here
This is how my code looks like.
export function anchorheader_onviewportEnter() {
$w(“#LogoB”).show();
$w(“#largeS”).show();
$w(“#MenuBar”).show();
$w(“#LogoS”).hide();
$w(“#smallstrip”).hide();
$w(“#MenuBox”).hide(“FloatOut”);
}
export function anchorheader_onviewportLeave() {
$w(“#LogoS”).show();
$w(“#smallstrip”).show();
$w(“#MenuBox”).show();
$w(“#LogoB”).hide();
$w(“#largeS”).hide();
$w(“#MenuBar”).hide(“FloatOut”);
}
Thanks
Pawan
Hello Pawan, please check if you add that code to the SITE CODE, not PAGE CODE. It must be site-wide!
Thanks for quick revert.
Indeed it’s on the Site Code.
And all the elements are attached to the header, Pawan?
Absolutely… I just checked again.
Except the logo ( LogoB & LogoS) that are pinned to screen with ‘Show on all pages’.
When you copy & paste the anchor to the other pages, make sure that you activate the Viewport In/Out events using the properties panel.
Make sure you copy & paste anchor … don’t add new one because then the #anchor1 (etc) won’t match your site code.
Thank you so much.
I tried on another website, it seems to be working.
Yeah, it must work. Maybe some other code prevents running it as needed in your case. I just completed testing sticky header and move it to the live site - everything works well.