How to Create a Sticky Header | Velo by Wix
HTML-код
- Опубликовано: 3 янв 2021
- For a fully detailed API reference, articles, examples and more videos, visit:
www.wix.com/velo?...
Watch how to create a sticky header that changes as visitors scroll through your site. We’ll do this by using strip elements to create 2 headers and the point on the page where they switch, as well as a few lines of code to add functionality.
About Velo by Wix:
Velo by Wix is an open development platform that lets you build advanced web applications. With serverless computing and hassle-free coding, you can manage all your content from integrated databases, add your own code in the built-in IDE or work in your own environment, and connect to 100s of APIs. Plus, you get total design freedom from the Wix Editor and optimized business applications-all in one integrated platform. Build, manage, deploy and scale your next web project with Velo by Wix.
Velo by Wix-Accelerated Development of Web Applications
www.wix.com/
/ wix
/ wix
/ wixcom
/ wix
en.wikipedia.org/wiki/Wix.com 
Хобби
This is insanely complicated for what should be a basic feature. LOTS of websites have this, it's very common.
Pls Add the same CODE we learned here, in the description box
Thank you, this was exactly as i wanted!
We're glad we were spot on 😉
Loved the video. It worked perfectly fine after two to three trials. The only point we must ensure is to attach both strips to the header for the code to function properly.
not working
okay working now
Where we have to put 'transition strip'...? In header or in the section below...?
You are the man!
Hi, thank you for the video, it works great. The only issue I am having is when a user hits refresh on its browser after having scrolled down on the page. The website page reloads and opens directly halfway down the page where the user previously was. When that happens, the code does not work and the strip showing in the header is not the scrolling strip. Any way to fix that?
Hi there Manon, thank you for reaching out, we would recommend reaching out to our customer care team at wix.com/contact. They will be able to access your site and take a closer look at this for you.
If Wix is a tool for people who do not code, why wouldn't you add the code in the description to help people avoid mistakes?
Hi Gigi, Wix provides you with everything you need to create a professional website, whether you have experience in coding, or not. If you do know a little bit of coding, Velo by Wix allows you to rapidly build, manage and deploy professional web apps, among many other capabilities. lo f you'd like to give it a try or need some guidance, feel free to get in touch with our customer care department, they'll be happy to assist you with any questions you have. support.wix.com/en/article/contacting-wix-customer-care-for-support
@@Wix Come on.
At 1:53 the "Show in all Pages" toggle doesn't appear on the right click and the Site tab in the Code panel is not there. It really sucks because Wix keeps changing the interface so this type of tutorial is not helping over time. It's really inconvenient!
Hi there, we're sorry to hear you are having a hard time, and our customer care team would be happy to help walk you through anything you need. You may reach our team anytime at wix.com/contact.
Hi..I have a question. Do we have to publish to see the changes or we can view it on test site as well?
You can use a get feedback link if you are not ready to publish, please see here: wix.to/DdSplwo
How do you use one picture as the background for both the header and the first "page" or "section"?
I started a site with ADI and moved to editor... Does that create some issues with using this method?
Hi Brendon, if you need help with editing your site, please get in touch with our customer care, they will be happy to provide you with additional information >> support.wix.com/en/article/contacting-wix-customer-care-for-support
Same here, got any help?
Thanks for the tutorial. Looks really cool. I couldn't bring it to work for me however. When draging the second strip into the header, it automatically wants to attach to the first strip already in the Header and not in the header itself. I coulnd't bring both strips to be attached in the header. Did someone have the same issue ? Is there any other way to do it than to drag ?
Hi there, thank you for the feedback. We would recommend getting in touch with our Velo team in customer care, they will be happy to take a closer look at this for you >> support.wix.com/en/article/contacting-wix-customer-care-for-support.
same problem here. I think wix isnt able to show how this is done correctly
@@danielrothmund4764 The trick I finally found to make it work was to make the header big enough to add both strips in it (one below the other) and then to select the one below and place it at the top using the up arrow key. You can then make the header its normal size again. A bit of a hassle but it worked for me.
@@Abysse20 Hi I see what you did, I tried the same but left with a little bit sticking out the bottom. Seems when attaching the strip to the header you have to watch it doesn't say connect to strip. can you only see the result in published? for me it didn't do anything
dude you're a genius@@Abysse20
I find that you see the Header and the two strips when you go to the mobile view. How do I fix it so that you only see the header?
I notice that the WIX used in the video is an older version to the current WIX. The code works well when in desktop mode.
Hi Janice, you can hide elements in the mobile view > wix.to/pkYUWZD
For any assistance, please contact our team at wix.com/contact.
Hi, thank you for this tutorial. It works perfectly on desktop. However, it does not work on mobile, because the transition strip (set to "Show on All Pages") gets placed within the header in the mobile version. Any solution for that? Thanks!
Hey, this seems like an issue that our technical team should look into. Please submit a support request and include a detailed description of the issue, any screenshots to illustrate the issue, and a description of any steps you already tried to resolve the issue. This way, our team will have a clear understanding of the issue. You can reach them by visiting here >> wix.click/3J3Gj5l.
Is it a possibility to have a sticky header on the mobile version of your website?
Hi John, this should be possible with Velo. If you need help with setting up the sticky menu on your mobile, please get in touch with our customer care through our contact page, our team will be happy to assist further >> support.wix.com/en/article/contacting-wix-customer-care-for-support
hey can you help me showing how to add multi level menu in wix, like a folder menu inside another folder menu in main menu
Hi there, thank you for reaching out, you can find the steps to a mega menu here > www.wix.com/velo/example/mega-menu
Cool, but I think it's time to push Editor X more now, which is far superior to this outdated classic editor.
I understand that this is more or a Velo related video, though :)
EditorX is still buggy (as it's in beta) but agree, they need to push it more.
Is it possible to make sticky menu In a different background color without using header strip? Because my site is in 2 languages with one from right to left and the other from left to right. So I moved the header up and created unreal menus.I would be very happy if you answer me soon. it urgent :(
Hi there, hank you for your interest, we would recommend checking out our Velo forum for similar requests, or submitting your own. You can find our forum here: www.wix.com/velo/forum. You may also contact our customer care team at wix.com/contact and they will be happy to look into the available options for you.
Thank you for the video!, but what do i do if i want the defaultHeaderStrip text to be WHITE and leave the scrollingHeaderStrip with BLACK text?
Hi Jason, we'd recommend contacting our customer care team with your request for assistance. You can reach our team at anytime at bit.ly/2S0NEJY they will be happy to assist you with this.
Sorry but this might sound like t a stupid question, but how do you get the header to be transparent over the first section of the site?
Hi Daniele, thank you for reaching out, you can do this from the settings, there is an option for opacity. You can find the steps here: wix.to/CWO0709 and if you need any assistance, you can always reach us at wix.com/contact.
Can you put the code in the description so people can copy it? :)
Thank you for the suggestion, Ja. In the meantime, we recommend visiting our Velo forum for additional tutorials and examples of code that you can implement on your site >> www.wix.com/velo/forum
I put in the code exactly as this one but if I start to scroll even a little past the main menu that's fixed (not the scrolling one), it won't allow me to click on it at all until I get past the transition point for the scrolling header to pop up. What can I do to fix this?
Hi Brenda, thank you for the feedback. We suggest reaching out to our customer care regarding this issue, they'll be happy to take a closer look >> support.wix.com/en/article/contacting-wix-customer-care-for-support.
Did you find out how to fix it?
what about viewing on mobile? I dont want both strips to show on mobile viewing of my website
Hi Matthew, if you need help with setting up a sticky header on your mobile site, please get in touch with our customer care department >> support.wix.com/en/article/contacting-wix-customer-care-for-support, they'll be happy to provide you with additional intructions.
are there tutorials for wix code?
Hi there, thank you for reaching out, we do have a list of tutorials in our help center. You can use our link to access them >> bit.ly/2YiH1s9
You can also check out our Velo Forum for tutorials, assistance and more. >> www.wix.com/velo/forum
this is great but it only works on my homepage. it doesn't work properly on other pages. i put the code on the masterpage but the codes are giving me errors on other pages. any suggestions?
Hi there, thank you for reaching out, we would recommend posting your question in our Velo Forum here: www.wix.com/velo/forum
You can also reach out to our customer care team through our contact link here: bit.ly/2S0NEJY
My scrolling down menu only has the background, all the logo and menubar are gone, I check the code, the function are work, could you tell me how I can specify this issue, thanks
Hi Gary, we recommend contacting our customer care team to take a look at your settings. You can visit our team here: bit.ly/2S0NEJY
You can also check out our Velo Forum at www.wix.com/velo/forum
Ok so do the two strips belong to the header?
because now the property "hide" doesnt exist in either header or footer
please, a proper response instead of another copy&paste...
Yes, both strips go in the header and the third one is outside but still set to show on all pages. The full instructions can also be found here > www.wix.com/velo/example/sticky-header
If you find you are missing a step or need any additional help, please contact our customer care team here: bit.ly/2S0NEJY
@@Wix appreciate it
what to do if you're on a mac? when I ctrl click none of those options pop up?
Hi Jillian, have you tried clicking Command instead? You can also find written instructions here: bit.ly/3x0G86L.
my "scrollingHeaderStrip" only shows up when I scroll up. So if I scroll down on the page it does not appear, only when i start to scroll up
Hi Asker, if you need help with your editor, please get in touch with our customer care department through our contact page >> support.wix.com/en/article/contacting-wix-customer-care-for-support. Our Velo team will be more than happy to take a look at this for you.
why is the code not in the description. I personally think that this isnt that userfriendly
Hi Daniel, thank you for the feedback. For a fully detailed API reference, articles, examples and more videos you can visit this link >> www.wix.com/velo?
My velo code doesn't work for some reason. When I try to implement a function or use an if-statement or an arrow function, nothing happens. I'm quite certain my syntax is correct but no matter what I do I can't get these simple features to work. Can someone please help? I've been searching all night and it seems no one else has run into this problem.
Hi there, thank you for reaching out, we would recommend checking out our Velo forum at wix.com/velo/forum or contacting our customer care team at wix.com/contact for assistance.
love the video thank you. would be nice if you had the code needed in the description. Also...I'm getting an "expected 1 argument but got 2" error. with
$w("#DefaultHeading").show(); part
Hi Gus, if you need help with setting up your sticky header, please get in touch with our Velo customer care team through our contact page, they'll be happy to provide you with further assistance >> support.wix.com/en/article/contacting-wix-customer-care-for-support
It drives me nuts, how to attach both menus to the header? Only the first one attaches to it, the second one attaches to the first one.
Hi Piotr, if you need help with attaching the menu to the header, please get in touch with our customer care department, they'll be happy to provide you with additional instructions. You can get in touch with our team through the contact page >> support.wix.com/en/article/contacting-wix-customer-care-for-support.
same problem here Piotr
My scrolling header do not show to the right point where I added my transition strip.
Elle, our customer care team would be happy to look into this for you if you'd like to reach out to them here at wix.com/contact
I can't find the Site code toggle please help
Hi Omar, sounds like you might benefit out of speaking with our Velo team from customer care. Please get in touch with them through our contact page >> support.wix.com/en/article/contacting-wix-customer-care-for-support they will be happy to assist.
Why this code is not working for me?
Hello, we'd recommend checking out our Velo Forum for solutions or submitting your own post at wix.com/velo/forum. You can also contact our customer care team at wix.com/contact for assistance.
I just can't make it to work 😫😭 The code just doesn't seem to run. I spent a whole day trying this, renaming the strips to even the same ID as you guys did in the video so that for some reason it would work better but nothing……… With normal HTML/CSS this basic functionality would be long done! Really desperate over here, please help!!
Hi there. Our Velo team would be happy to look into this for you if you'd like to reach out at wix.com/contact. Thank you.
Sadly even the support wasn't able to help me... However, for some unknown reason this suddenly just started working 🙌
Is there any way to achieve this also on the mobile view? The burger menu / close menu element can only be used once in the header, so I'm unable to duplicate it on a scrolling header.
its not showing in 2022 version wix
Hi Chinar, thank you for reaching out, you can find the link with the steps here: www.wix.com/velo/example/sticky-header. We would also recommend using our Forum for assistance: wix.com/velo/forum
not working
Hi MJ, if you're running into trouble with creating a sticky header, please get in touch with our Velo team through customer care, they'll be happy to assist you further >> support.wix.com/en/article/contacting-wix-customer-care-for-support.
What do you mean rightclick to open a menu? What do you mean there's a settings button for panels? What do you mean Dev Mode?
I can't do any of that. de hek
Hello. If you have any queries on any of these steps, feel free to reach out to our dedicated support team for assistance here >> bit.ly/3baYZ3L
@@Wix well that doesn't help at all...
I did find the Dev mode. But those cog symbol settings menus are still no where to be seen. Any ideas?
I don't understand this at all. How the heck do you add a header? I'm working on a website that doesn't have one, and I can't "Add Header"
Hi, you can see how to add or remove a header here > support.wix.com/en/article/wix-editor-adding-or-removing-the-header-and-footer-on-your-mobile-site
If you need help, please reach out to our team at wix.com/contact
Code is the same, steps are the same, The main header is hiding but the second is not appearing
Hi there, we're sorry to hear you ran into trouble with creating a sticky header. Feel free to get in touch with our customer care department, they will be more than happy to go over the steps with you, and make sure you implement it correctly >> support.wix.com/en/article/contacting-wix-customer-care-for-support. Thank you.
For those who don't have Wix code knowledge, why isn't there an editor setting to change the color of the child objects inside when the header background is highlighted? I'm postponing the release date of my site for days just because of this mistake.
This policy you are following is very stupid. If you're catering to an audience, you should have everything that audience needs!
Hello Tomyris, thank you for bringing this to our attention. Our velo team will be more than happy to provide you with further assistance. Kindly reach out to them through our contact page >> support.wix.com/en/article/contacting-wix-customer-care-for-support, they will be happy to further assist.
@@Wix Bullshit. They are not helping me. The only answer they gave me is from here "Own Velo" and write code.
I am a desktop software developer. If I wanted to write code for the web, I would be a web developer. Also, I don't have time to learn the tutorial. I have very little time.
@@tomyrisstudios29 there’s a channel called wix fix. He does it and you can just copy the code he uses. It was a lot easier to understand. Hope this helps
@@tomyrisstudios29 Use default templates and non-Velo solutions or learn to code. Really simple solution. Your comment was very nasty for no reason. Stop being lazy.
Lost me at 'Code' :(
This is one of the worse video tutorials. Who was this intended for? People, who already know how to code?
Hi Robert, we're sorry you feel this way and appreciate the feedback. If there's anything specific you feel that is missing, please let us know through our contact page >> support.wix.com/en/article/contacting-wix-customer-care-for-support.
Greate Video! Is it possible to fade the header instead of just hide? Something like $w("#name").fade();?
Hi Guif, our Velo team will be happy to provide you with further instructions on how to achieve this result. Please get in touch with them through our contact page >> support.wix.com/en/article/contacting-wix-customer-care-for-support.
@@Wix found it already. Just call $w("#name").hide("fade");
Hello! I tried this exact code however its not working for mine. I get the error "Running the code for the site. To debug this code in your browser's dev tools, open masterPage.js.
Error" please help!
Hi Emily, please contact our customer care team at wix.com/contact for assistance or check out our forum at wix.com/velo/forum.
Looking for the code? www.wix.com/velo/examples?category=interactions&search=sticky+header
You're welcome
THANK YOU :)