Highlight Nav Menu on scroll with JavaScript

so what's up guys welcome to another video today we are going to make a fully functional highlighted navigation menu so this is really cool actually so in this menu whenever you will scroll according to your escal will highlight the navigation menu item so if you are in the about section the about menu item will be highlighted so this will be really awesome and we will do it with a little bit of javascript so let's actually show you what we are going to make here so here if you can see that this is our page and we are now in our home section if i scroll down and go to my about so if you saw that the about section here and the about menu item is now fully highlighted here and if i scroll down more the contact is highlighted because we are in the contact section and if i scroll more now we are in the footer section and if i scroll back to the home now you can see that the home is highlighted so if you can see that it is actually fully functional highlighted navigation menu and we are going to make it in this video so before we start the video i want to mention that if you want to follow us on our instagram you can do that the handle is instagram.com web underscore cipher so if you follow us you will get some interesting tips and tricks about web design and development maybe that will be helpful for you and also if you face any kind of problem with this tutorial you can join our community group the link will be in the description we have a great number of community member and which is growing day by day so join the group the link will be description all the link will be in the description so with that saying let's roll the intro [Music] so here as you can see that the html file and also we have empty javascript and also empty css file as you can see so first of all let's get a boilerplate with exclamation sign and you will get this boilerplate here and first of all instead of my body i'll have a nav and here i will have empty with the class of container and here i will have a ul and inside that i will have a ally and with the ally i will have anchor tag which will be our navigation item so first of all i will have as a death link and here i will say that home so let's get more navigation link here so about and i'll just say that content or contact i think footer so these are the simple navigation link that we have here and after that i will have some section according to this navigation so here after the nav let's have some section and inside the section we'll have id so for the first one we will say that home and here let's have a text with a h1 and let's say that home so these will be similar for the about so i just can say that about and here i will just say that about and similar for the contact and also the footer basically those are the section of the website or the web page as you can see so let's have some style for this link our css here and here in our css first of all let's say that i want to have my font so i already selected the font here so let me copy and paste it so you can just go to the fonts.google.com and you can get your own font so whatever you like so i just grabbed roboto monophones here so just use it so before that let's actually grab the universal selector and say that padding will be zero and margin will be zero and let's say that box sizing will be the border box and as you can see that we don't have any uh extra gap anymore and after that in our html let's apply the font here and let's say that font family that i want is the robotomono anyway save now as you can see that the font is already changed here so after that let's say that font size that we have will be 24 pixel and scroll behavior will be smooth and if i save 9 you can see that that's our font and everything is looking fine i think the last one means this one will have a capital f so great it's looking perfect and after that let's come to our section here so section and for each section i will say that the height will be 100 vh and the width will be hundred percent and after that let's say that the background color will be gray and let's say that align items uh let's make it center and let's say that inside that if i save now as you can see that everyone is now 100 vh and now what i need actually i need to make this text means any of the content inside this section i want it in the center so for that what i can do i just can say the display flex and align items center and justify content will be in the center so this will make everything center as you can see and finally we just need to give a separate color to each of our section so just grab the section name with the id so home so this time for the first one we will use royal blue and for our uh what is the next about i'll just say that background color will be a commemorating or something like that and let's say that footer and background color will be crimson so if i save now as you can see that we have separate color for each of our section and it's fine so after that let's go back to our this navigation and give some style so nav for the nav i will say that position will be the sticky so i want it as sticky navigation so top will be zero so i mean that means it will be sticky in the top so after that background color will be white and finally the nav container here and now let's say that the width will be i want to have it 90 percent and the max width that we will allow 1000 pixel and let's say that margin 0 auto so what did you do it will keep everything center and it will allow 1000 pixel and if we if we go more than 1000 pixel it will actually uh stick with 1000 pixel and keep all the content inside of it and after that let's go to the texture line and make it center and padding and if i save now you can see that everything is now in center and looking good so finally in the nav container uh ul li the list item i want it as a lm block so everything will be side by side as you can see and also let's say that i don't want to have any kind of list style here so list style will be in none and if i save now it's looking perfect and let's go to our anchor tag here so nav container ul ally air and display will be something like inland block because we wanna have some heightened width in the block here and here let's say that you know what instead of hygiene width i will use padding so 10 pixel and 20 pixel yeah looking good and finally what i need actually i need the color so the color will be black and also let's say the text decoration will be none if i save now looking perfect this text as you can see here and also let's say that whenever we'll have a active menu what i want to do so for the active menu i'll change the background color of the menu item so let's say that nav container and ul alli so here for the active list item so list item with a class of active so for round we don't have any kind of active class so let's give it a active class so here let's say that i want to have active home so let's manually give the class active here and let's see what it will be in our css so let's make it a background color red or you can say crimson something like that and if i save now you can see that only the active one has a background color of kimchen because only the active class means this one the first list item so we will actually manage this active class by our javascript so also let's say that i want to have a transition here so transition will be 0.3 second ease and background color means whenever the background color will change it will have this transition and finally uh let's say that whenever we will have a active list item also what i want to do i want to change the anchor tag color so color will be in white and if i save now you can see that only for the active navigation item have the color of white and background crimson so that's it for our css and let's remove the class here and save it and let's go to our javascript and before that here let's link the javascript so here we just linked our main.js and here in our main.js first of all we need to get all the section so constant sections equals to query selector all because we have multiple section here so i will have all the section with the section tag and after that let's actually say that the nav list so all the navigation item here sorry navigation list item and let's actually grab them so document dot query selector all because we have multiple items here so we can just grab it with the nav so we just can say that inside the nav i have a container and inside that i have ul and ally i need all the ali so perfect and it's time for our even listener so i want a highlighted navigation menu here so what i can do whenever i will scroll i can actually keep track where we are now in our scroll so based on these scroll we can actually highlight our navigation item here so for that we need to add a even listener on our scroll so whenever we will scroll we can do our work let's say that window dot admin listener and here will be the type scroll so whenever we will scroll whatever we will do we will actually run this function so inside of this function first of all let's actually get our current section so let current so for the initial state we will not have any kind of current section and after that let's actually loop through all the sections here so sections dot for each and here for each section i just can say that so inside this loop we need the section top for each of our section so here what we can do actually we can for example let's say that this is the about section and you can see that the top part of the about section is here and we need the amount means how far it is from the page top to this section top means about section top so it will calculate from the page top to this about section top and it will keep tracking for each of our section so we will have the section top for each of our section so let's say that constant section top equals to so section dot offset top so these will actually calculate from the page top means zero to how far it is from the page top i mean so it will be different for each of our section as you can see and actually we can console log it so that i can show you console log the section top and if i save nand here let's actually open the console and if i scroll now you can see that we have different value so 72 is for our home this one is for our about this one is for our contact and this one is for our footer so all these value is getting dynamically with the javascript uh we are not hard coding this because maybe in future your section may have different kind of heightened width so it will be all dynamic so we don't need to worry so it will calculate all the section top for you and after that now based on this number we can actually say where we are now so if i scroll more than these now we can say that we are in the about section and now we can highlight the about navigation item so for that also what i need actually i need to get the section height so how much uh the height of a section so it is easy to get so we can just set that section height equals to section dot client height so client height yeah this one so it will get the height so now we need to understand the page y offset means how much we are scrolled here so to understand that in our window.even listener we can actually console.log it so console.log page y offset means how much we already escort so if i save and open my inspect and console so here if i scroll now you can see that we are actually scrolled 204 and if i go further now you can see that the number is increasing and if i go top so now you can see that the number is decreasing and eventually it is 0 means we are in the top so this is the page y offset which means how much we already scrolled here so with this page why scroll now we can actually say where we are now so i just can say that page y offset if our page y offset is bigger than our section top i just cancel that current so current this one right now it is empty now i just can say that the current will be section dot get attribute so we will actually get the attribute so if you notice that every section we have the id so we just can get the id so here i just can say the id and it will get the id now we can console log it and we can see so here after this for each loop you can just console.log the current and if i save and open my console once more and if i scroll now you can see that now for the first time it is empty because we are in the top now whenever we scroll down a little bit now we are in the home and if i scroll down more now you can see that now we are in the about if i scroll down more we are in now contact and finally if you can see that it is not saying the footer because uh for getting the console log means getting this current section we need to actually go more than section top so to actually get the footer one we can also say that equal so greater than equal so if i save now and scroll down now you can see that we also getting the footer means whenever we scrolled equal to our section top means photo section top we will also have the current so now you can see that we are getting the id for our section so with that id now we can actually have our highlighted navigation so here first of all let's say that netherli dot forage and for each list item uh i need to remove the active class first so here let's say that ally dot class list dot remove and i wanna remove the active one so now we are removing uh active class so if previously anyone have the active class we first remove that and after that we need to check the class name with our this current so here let's say that li dot class list dot contains so if the class list contains the active sorry not the active if the class list contain the current means the current section means so if you can see here in our index so everyone here oh we don't have the class yet so what i need actually i need to have a class for each of our list item here so let's have the class here so class will be the home so it should be exact same as our this id so you can see that this is the class home and here is the id home so you need to make sure that it's matching so after that we have about and here we have the class of contact so instead of having class and id you can also use data attribute if you want also let's say that photo and save it so now you can see that we have all the class here so whenever we will have the current about this one now we can actually check which one have the about class and we can see that this one have the about class and now we can change the class list or we can actually add a class list which is active so let's do it here and let's say that whenever we will get the list item which have the current class means this current class say that list dot list dot add active and if i save now if i scroll down now you can see that the first one this home is now activated and now you can see that it is home and if i go further more you can see that this is about and this is the contact and this is the footer so now you can see that we have the full highlighted you can see uh navigation here and also let's also get the link here so this will be the home about section and contact section and finally the footer section here if i save now we can also click that now you can see that it is contact and photo so now you can see that it's looking good so the problem is now if i scroll here as you can see now it is in the home but i almost scrolled the home section now i am almost in the about section but still my home is highlighted because for these logic as you can see that according to this logic i need to actually scroll similar amount of this section top means i need to scroll to more than this section top or equal to this section top means i need to ask all this amount so we can actually change that if you want so let's actually change that if i scroll one third of this whole section i will actually change the class list or i will change the current so to do that it is really simple for that we already get the section height here as you can see so now what i can do so first of all let's wrap this section top with the parenthesis here and after that i just can say that minus section height divided by 3 and if i save now if you notice whenever i will let's call one third and now you can see that now we're in the about we don't need to scroll the full amount of section as you can see so you can actually play around uh with this logic and come out where you wanna change the current of our scroll so it's looking good perfect everything is looking great so the problem is uh for the first time whenever we'll come to this home page now you can see that it is not highlighted so to fix that we can actually have a default active so in our list item we just can manually put active to the default one means the home section so you can see that this is the home navigation item and we just mainly put this active class here if we save now we have this active class in our home and but whenever we let's call it will be changed here according to our scroll so that's it as you can see that we have full functional uh highlighted navigation menu here and i hope it will be helpful for you that's it guys if you like this video please give it a thumbs up and don't forget to share it with your friends and family also if you want to watch more video like this one please subscribe the channel and also turn on the notification bell so that you can get notified whenever i will upload my next video so my name is sarfan and i will see you in the next video till then bye bye good [Music] [Applause] [Music] office [Music] you

Channel: WEB CIFAR

Views: 17,371

Keywords: web cifar, shaif arfan, change navigation style on scroll, animate navigation on scroll, change navigation on scroll, change navbar on scroll, change navbar style on scroll, highlighted nav bar on scroll, active nav bar on scroll, active nav menu item when scroll, highlight nav bar, highlight active section, change active menu item on scroll, highlight menu item on scroll with javascript, change menu active on scroll, active nav menu on scroll with javascript

Id: RsPWEmfOQdU

Length: 24min 1sec (1441 seconds)

Published: Tue Jan 12 2021