Place 2 different strips in your Header area, one below the other
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
Set the top strip to be “Collapsed on load” (in the Properties Panel)
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() {
Add the following to your code, replacing TopStrip and BottomStrip with your strips’ names:
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 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!
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
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?
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”);}
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!
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!
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 copied exactly as you have shown but when scrolling don the page slowly, the header will quickly collapse and then restore back to the larger on (bottom one). If you scroll down the page quickly, it works no problem.
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
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:
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.
I have the same issue as well!!! I have tried to fix it expand/collapse and show/hide, but none of this worked…
I also found out that there is a new feature in the header’s design settings that lets you change the color as you scroll down… But this is not effective for me as I want the size, color and menu position of my header to change as I scroll down; not just the color… Please let me know if you find anything useful on this issue…
it worked perfectly!
