Hi! I'm trying to create a menu that changes appearance when you scroll down past a certain point in the page.
I found some instructions on how to do it here https://www.wix.com/code/home/forum/questions-answers/how-to-create-a-sticky-header-menu and am giving them a try, but I'm having trouble with the first step: it seems headers can't be collapsed.
I tried placing a strip of the same size over it and collapsing that. It worked, but I can still see part of the actual header - a thinner strip that sticks to the top of the page... Any ideas on how I can make it disappear completely?
Thanks!
Sure!! Here it is:
1. Place 2 different strips in your Header area, one below the other
2. Design your menus:
Use the top strip for the menu you want to appear as you scroll down the page
Use the bottom strip for the menu you want to appear on load
3. Set the top strip to be "Collapsed on load" (in the Properties Panel)
4. Click on the bottom strip, and add a viewPortLeave function from the Properties Panel.
This will add a line to your site's code, it should look like this, (with your element's name instead of BottomStrip):
export function BottomStrip_viewportLeave() {
5. Add the following to your code, replacing TopStrip and BottomStrip with your strips' names:
$w("#TopStrip").expand("TopStrip");
$w("#BottomStrip").collapse("Bottom Strip");
6. Add a transparent line right below the bottom strip (not inside it) and set it to show on all pages using the right click menu
7. Click on it and add a viewPortEnter function from the properties panel. It should look like this:
export function Line_viewportEnter() {
8. Add the following to your code:
$w("#TopStrip").collapse("TopStrip");
$w("#BottomStrip").expand("Bottom Strip");
9. Your final code should look like this:
export function BottomStrip_viewportLeave() {
$w("#TopStrip").expand("TopStrip");
$w("#BottomStrip").collapse("Bottom Strip");
}
export function Line_viewportEnter() {
$w("#TopStrip").collapse("TopStrip");
$w("#BottomStrip").expand("Bottom Strip");
And that's it! Let me know if this helps :D
Hi everyone--I know it's been 2 years, but I did want to ask if anyone knows if this functionality is not supported or if there is an updated approach. I'm struggling to get this dynamic feature on my header on my current site with the code below:
export function bigstrip_viewportLeave() {
$w("#stripsmall").expand("stripsmall");
$w("#bigstrip").collapse("bigstrip");
}
export function headermarker_viewportEnter() {
$w("#stripsmall").collapse("stripsmall");
$w("#bigstrip").expand("bigstrip");
}
I've also tried the commands .show() and .hide() as per another comment suggestion, changing the editor's setting on how to handle the header, and adding anchors, etc.
How do I do the following step?
6. Add a transparent line right below the bottom strip (not inside it) and set it to show on all pages using the right click menu
Aloha, I thought I followed everything correctly, but the issue Im having is that the menu bar isnt moving as I scroll (yes I checked fixed/freeze header). Can anyone help?
Thanks!
I have the small strip arrange to the back (not hidden on load or anything), then big strip over the top.
I ended up not using an anchor and added a transparent line and selected it go on ALL pages (this will ensure the code is kept on the site not individual page. The line is placed directly under the header on the page....but i just fiddled with this until it did what I wanted.
Let me know if it ends up working!
Just cleaned up my site and put in a few collapsable menus too - much nicer- I'm loving Wix Code!
Megan, I’m going to try yours soon!
Which do you have arranged on top? Small under big?
Do you have the box checked off to hide on load or collapse on load. Or anything else? And where did you put your anchor?
I’m going to try and replicate you... because when i put the code in... there’s like nothing... absolutely nothing happened with my code haha!!
Fixed it! I shrunk my big strip, then made the header as small as my small strip. Then all I had to do was stretch out the big strip again going outside of the header area! Works perfectly. I hope I've done it right and it doesn't cause issues elsewhere.... if not YAY
Just found WixCode Yesterday and I'm figuring it out finally hahaha I train dogs not code websites! Thanks to all the many posts I've read to help me!
OK so I just tried your code Dan but added the item names again like I had in my last attempt and it works... but also doesn't. I have an anchor on the page and when I scroll pass it the big strip/main header disappears and the small one appears!!YAY BUT now I'm having an issue with blank space on the header once the big one disappears...mine have a very big size difference.
Try the code below- and if you figure out how to fix the issue I'm now having let me know!
export function SCROLLMARKER_viewportEnter() {
$w("#bigstrip").show("bigstrip");
$w("#stripsmall").hide("stripsmall");}
export function SCROLLMARKER_viewportLeave() {
$w("#bigstrip").hide("bigstrip");
$w("#stripsmall").show("stripsmall");}
Megan out codes are nearly the same. ... i however am receiving no reaction at all. Legit it just looks like a normal header.....so frustrating
I can't seem to make this menu work for me! I've tried so many different ways that other people have recommended or shown videos of it working for them... But nothing works for me!
Could someone let me know if something is wrong with my coding below? I followed the step by step instructions above (very easy to understand! thank you!) But still I go to preview and scroll down and its not working:(
export function bigstrip_viewportLeave() {
$w("#stripsmall").expand("stripsmall");
$w("#bigstrip").collapse("bigstrip");
}
export function headermarker_viewportEnter() {
$w("#stripsmall").collapse("stripsmall");
$w("#bigstrip").expand("bigstrip");
}
Your steps have gotten me the closest...when I scroll down the "bigstrip" main menu disappears and something appears but its not my "stripsmall"
Help anyone?
I have tried searching for hours to fix this.. please help
i want my header to appear large. then shrink to a smaller version on scroll
current set up - 2 strips and one anchor in header.. smaller strip is at the top under the big strip, the big strip is the size of the full header. The small strip is set as hidden on load. and this is the code that is on the site tab
export function anchorheader_onviewportLeave() {
$w("#stripsmall").show();
$w("#bigstrip").hide();
}
export function anchorheader_onviewportEnter() {
$w("#stripsmall").hide();
$w("#bigstrip").show();
}
Thank you Luana!! You're the best :) it worked perfectly!
Hi Kelcy! Not sure if that's it, but try entering a space before both of the "$w("#TopStrip)" lines. They should change color from green to black and blue. Let me know if that solves it!
Hi,
I really want this design too. I have completed each step (and labelled my strips the same to make it easy) but it isn't working. and when I check the code the .collapse and .expand are greyed out at the end. Not sure why?
Hi ! Can someone make a step by step of this ? Thank you so much ! Justine
Oh thank you! I had tried that and must have done something wrong, because it still showed on the page code tab, but it's working now.
Menu's all set!!
Instead of using an Anchor, try using a transparent line, and set it to be shown on all pages using the right click menu. Then define it's viewPortEnter or viewPortLeave function.
This will make the code be a part of SITE CODE tab, and should solve the problem for all pages.
I think this should do the trick.
Liran.
Me too, Anne!! I've been wanting to do something like this for a while, hoping I'll get it to work. Thanks for helping!! ^_^
@Liran
Yes, that's right. Since both strips are in the header, I need one to be collapsed on load and the other one to collapse when the first one expands. But since it's collapsed, I can't include an onEnter function with it. I guess I need a different element for the onEnter function to have it expand again, so I'm trying to find a way to do it that lets me use the site tab - it's going to be a big website, so it wouldnt be helpful to repeat the code for every single page. Using anchors or other elements moves the function to the page tab.
SOUNDS LIKE YOU ARE CLOSE!! I was so stoked to get this kind of menu on a Wix site, oh man. I want you to feel as happy as I did! :)