How to Create an On-Scroll Animated Header Using Wix Code (Step-by-Step)

hi David coder with decoder marketing here I’m gonna show you how to create an on scroll animated header using Wix code much like the element of design we get with our WordPress sites so jump into your Wix editor and follow along okay inside your Wix editor it’s going to be important that we need to enable two things here so we’re gonna go over tools we’re going to make sure that developer tools is selected as well as our properties panel so
I’ll just check mark that what we’ll do is we’ll get back to our home screen here and there’s a few things that we’re gonna need to make this work we’re going to need a small strip as I have labeled all of these so all these elements are already labeled don’t need a small strip we’re going to need logo our menu and any other elements that you’re going to want to have make this work and function the way you want it to in this case we have our
large logo we have our menu our small button our large button and our slogan so from top to bottom its small strip slogan large button our large strip large logo or a large navigation menu and our small button most importantly we need to make sure that we have our anchor without the anchor this won’t work okay and you also need to make sure that you’re enabling your header as a frozen position if you don’t want to have a frozen header it’s also
not going to allow this to work so what we’re going to do first is we’re going to basically take our small strip okay and we are going to add that directly into our header and attach the header we’re going to make sure that one it’s once it’s attached we’re going to want to select under our properties we’re going to want to select hidden onload okay next we’re going to want to move our slogan into the small strip along with our large button once
we get those worked in there we’re going to align them and once we have those aligned basically under our properties for our big contact button we want to make sure that it’s hidden onload and we also want to make sure that we select enable by default we don’t checkbox that element there this will not function it will not give us any ability to make any action once it’s live so we’re gonna want to checkbox enable by default and because we also
want this to be hidden onload we want to make sure that we select hidden onload next what we’re gonna do is we’re going to take our large strip which in this case we do not have a color for our large strip we want to basically be not seen onload so we went to our basically change strict background and we took our color and made it 0% so that we can see through there’s no need to checkbox any of these for the large strip just make sure that it’s
attached and the header next what we’re going to do is we’re going to take our logo and we’re also now going to throw that into the header we’re going to take our menu and place that into the header as well and then what we’re going to do last but not least we’re going to take our small contact button we’re also going to throw that into the header we have one other element which is our anchor we’ll get that in a second but let’s align these real
quick let’s try and align these so that way it looks nice and clean so now that we have these aligned it looks clean and professional we also to make sure that our button here on properties enabled by default again we had that I’m checked we’re still not gonna be able to make an action on that that particular button real quick I’m going to want to go through this in a second here it’s an evil that before I forget very last element we want to add
to this is our anchor if you remember my small strip the height of it was 70 so I want to basically put this anchor at the bottom of that first strip okay what we’re going to do then is every element here is labeled small contact button is there all over this my large navigation menu our logo we’re going to need make sure that those elements there the properties that are labeled here make sure that they’re also labeled and the code that we’re
going to add in a very short second here the first before we do that I want to show you two important things here but if we do not add this will not function correctly so on the anchor we’re basically going to go to on viewport and we’re gonna want to add okay I’ll come in here so let’s see here let’s get this to move up and what we want to do is we’re gonna add our event here in this case I want to take away the one but I want to go in front of
view and I want to say on okay I went to do the same thing with you port leave okay tight on okay so that way left to right we have and your header which is the property name and it’s going to go to on viewport needs okay this is a showing that it’s attached to the page in reality it’s not we have it on the header so what we can do is we can erase this code here this code that we have on page erase it okay let me bring this back up here so that
way there shouldn’t be anything under page there should be no code in here okay let’s drop this down and now what we’re going to do is I’m going to show you the code that we need to write and place under our sight reason we’re putting it on situs so that it goes on the entire site the header is for the entire site okay so that’s why we’re going to put it here this is the code that we need a place in this section okay I have two examples here my
first example is if you have different elements on the the viewport enter as opposed to leave do you have different elements I have two separate types of code here the first type is again if you have different elements like us okay we’re not doing a large logo to a small logo and a large menu to a small menu we’re doing a little bit differently but we still need to make sure that we have our small strip our slogan a big contact button under show
and then we do the same down below on the viewport enter we want to make sure that they’re hidden okay so we’re gonna hide those same properties and then for the ones that are gonna leave when we start to scroll we’re gonna make sure that the logo the larger strip the navigation menu and our small contact button all hide all right when we leave the viewport okay and then down on the load once we enter this page we want to make sure that those are
seen so we’re gonna command to show okay so what we do is we copy all of this here and we’re going to paste it right into our site code okay so again we have nothing on page we just need on site okay now if you have the version of big logo small logo the large menu small menu what you can do is take this code right here okay notice that you know all the properties are the same but opposite down here okay if there’s anything that’s off if it’s
misspelled or your properties here if for example small strips is you know not with an S and you have an S it’s not going to work properly everything needs to match your your code needs to match these properties that you see up here when you roll over so if we have it done correctly what we’ll see is this little beautiful new element of design so let’s take a preview here and take a look at our work and make sure that our code is functioning
correctly as well and it looks like it is firing correctly so what we can do is scroll as we scroll transitions over to our slogan and our call-to-action back up and computer’s running a little slow sorry but logo everything’s back learning functions now one thing I will note we do a lot of testing and we like to use this company when we’re testing and we’ll throw our domain in here and I can tell you that this particular piece of code adding it
to the header does not and has not so far from what we’ve seen slow down the load time for your site right here we’re at a you know minute or excuse me one second one point four or five seconds so by adding that code did not slow down our load so the search engines would be happy to hear that going back into this again you know this is what it looks like you know without that feature and this is what it looks like with that feature okay so again
little clean there’s some little glitches there let’s actually go back to the editor real quick as some of you may think that looked kind of glitchy just we publish it again let’s take a look at our live site we’ll get this to load here now that we have it loaded there you go folks the on scroll animated better now looks nice and clean nice call to action and right back up to the top do you have any questions feel free you know to comment below
jump over to our website subscribe to our YouTube channel for more videos is we’re going to go through more of whit’s code but mainly our expertise is internet marketing so there’s a lot of tips and tricks that we’re going to release through our channel in 2018 thank you for following along and look forward to seeing your work of art posts posted down in the comments below thank you