Design mounted navigation on scroll with CSS and jQuery




Desk of Contents

One factor that may improve consumer expertise and general impression out of your web site is at all times current navigation. Why ought to the customer scroll again to the highest or click on yet another time to let the script transfer the window to the highest? Bear in mind, each click on counts. We will simply resolve this drawback of accessibility by creating mounted navigation. Nonetheless, one of these navigation is ineffective if customer stays within the prime a part of the web page. Why to not use jQuery to “change” between static and glued navigation? That is precisely what we are going to do right now …

The problem for right now is to make use of CSS and jQuery to create navigation that can change between static and glued positioning in line with particular situation. This situation will likely be scrolling the window. So, when consumer scrolls the web page to some extent, the navigation will turn out to be mounted. When he comes again to the highest, navigation will robotically change again to static. We can even add a shadow to navigation when it is going to be mounted so customers will have the ability to distinguish it from the remainder of web page.

We is not going to use any exterior belongings besides jQuery library. Beneath are hyperlinks to stay demo on Codepen and in addition code in Github repository. Be at liberty to make use of and modify the code as you need.

Codepen stay demo:

https://codepen.io/d3v3r0/pen/Lzfjt

HTML

To make it a bit shorter, let’s suppose that we have already got fundamental HTML legitimate construction (doctype, html, head and physique) in place so we are able to transfer straight to right now’s problem. The very first thing to create the HTML skelet will likely be making a <div> with class ”wrapper”. This may wrap up complete format of the web page. Inside this div will likely be nested following components. First is <header> with class “js-header” and position attribute “banner” adopted by three <part> components. These part components are simply to check the scrolling performance and aren’t required in any respect.

The navigation, nested inside header, will likely be composed of unordered listing (<ul>) with class “nav” with 4 anchor tags (<a>) inside listing objects (<li>). This all will likely be wrapped up by <nav> tag with position attribute “navigation”. That is all for HTML.

HTML:

<div class="wrapper">
 <header class="js-header" position="banner">
  <nav position="navigation">
   <ul class="nav">
    <li><a href="https://weblog.alexdevero.com/design-fixed-navigation-on-scroll-with-css-and-jquery/#">Dwelling</a></li>
    <li><a href="https://weblog.alexdevero.com/design-fixed-navigation-on-scroll-with-css-and-jquery/#">Portfolio</a></li>
    <li><a href="https://weblog.alexdevero.com/design-fixed-navigation-on-scroll-with-css-and-jquery/#">About</a></li>
    <li><a href="https://weblog.alexdevero.com/design-fixed-navigation-on-scroll-with-css-and-jquery/#">Contact</a></li>
   </ul>
  </nav>
 </header>
 <part></part>
 <part></part>
 <part></part>
</div>

CSS

After setting the HTML, let’s transfer ahead into the CSS. We’ll begin by establishing the kinds for fundamental format of the web page. First, let’s set a default “font-size” and “font-family” for physique ingredient. Worth will likely be “16px” for dimension and “sans-serif” for household. Subsequent is to reset “margin” and “padding” of physique and html components by setting them to “0”. Additionally, let’s set “width” and “peak” to “100%” for these two components. Then, use the common selector (*) and create new rule containing “box-sizing” property with worth of “border-box”. For “wrapper” div, we are going to set its “width” and peak to “100%”.

CSS:

/*Typography*/
physique {font: 16px sans-serif;}
/*Structure*/
html,
physique {
 margin: 0;
 padding: 0;
 width: 100%;
 peak: 100%;
}
* {box-sizing: border-box;}
.wrapper {
 width: 100%;
 peak: 100%;
}

Now we are going to model the sections and header. This will likely be quick and easy. Part may have “width” set to “100%”, “min-height” to “480px” and “background” of “#eee” (gentle gray). Since there is no such thing as a content material in it, you may also use common “peak” property if you need. For header, we can even set the “width” to “100%”. The “background” will likely be “#fff” (white) and let’s additionally add “transition” with worth of “all .3s” (it is going to be utilized to box-shadow sooner or later).

CSS:

part {
 width: 100%;
 min-height: 480px;
 background: #eee;
}
/*Navigation*/
header {
 width: 100%;
 background: #fff;
 transition: all .3s;
}

After styling up the header we are going to transfer to navigation. Let’s choose the “nav” class (unordered listing) and set its “show” property to “flex”. To put the navigation hyperlinks to the middle of header, set “justify-content” to “middle”. One other values are “flex-start”, “flex-end”, “space-around” and “space-between”. To do away with white area and bullet factors set the “margin” and “padding” to “0” and “list-style-type” to “none”.

CSS:

.nav {
 show: flex;
 justify-content: middle;
 margin: 0;
 padding: 0;
 list-style-type: none;
}

The listing is OK, subsequent are listing objects and anchor tags. For listing objects, set the “padding” to “1em 0” so as to add some area above and under the hyperlinks and in addition set the “width” to “6em” to area the hyperlinks persistently.

CSS:

.nav li {
 padding: 1em 0;
 width: 6em;
}

Now the hyperlinks … Let’s set the highest and backside “padding” to “.8em”. This may transfer backside border we are going to create for “hover” state. To make the hyperlinks stand out a bit, set the “font-weight” to daring and in addition align them to “middle”. Use “text-decoration” with worth of “none” to take away underline and set the “coloration” to “#000” (black). For “hover” state we are going to change the “coloration” to “#666” (gray) and add “border-bottom” with worth of “.25em strong”. Let’s additionally add “transition” set to “all .3s” to smoother the transition between regular and “hover” state.

CSS:

.nav a {
 padding: .8em 0;
 font-weight: daring;
 text-align: middle;
 text-decoration: none;
 coloration: #000;
 transition: all .25s;
}
.nav a:hover {
 coloration: #666;
 border-bottom: .25em strong;
}

Final thing in CSS will likely be making a particular class that will likely be appended by jQuery to header and alter it to mounted. This class will likely be known as “mounted” and also will comprise “box-shadow” with worth of “0 2px 5px #ccc” (horizontal vertical unfold coloration).

CSS:

.mounted {
 place: mounted;
 box-shadow: 0 2px 5px #ccc;
}

jQuery

HTML and CSS are set and prepared, so the very last thing that continues to be is to place collectively the jQuery code to complete this problem. We’ll begin by making a operate that can comprise all of the code and can run after the web page is loaded. You may both use “$(operate() {})” or “$(doc).prepared(operate() {})”. Each of those approaches have the identical impact – code inside will run after the entire web page (doc) is loaded.

jQuery:

$(operate() {});

Inside this operate we are going to choose the “window” object and jQuery “scroll()” technique to watch for scrolling occasion and it’ll use handler within the type of operate to execute.

jQuery:

$(operate() {
 $(window).scroll(operate() {});
});

Now we are going to create native variable “winOffset” to retailer the offset worth. As a result of varied browsers can have two completely different names for doc object can even use “||” (or) operator to cowl each of the choices. We’ll choose the “doc” and “physique” and use “scrollTop” property to seek out out what the offset is (scrollTop will return an integer).

jQuery:

var winOffset = doc.documentElement.scrollTop || doc.physique.scrollTop;

It’s time to create the center or engine of the mechanism. It is going to be based mostly on “if” assertion. The situation will likely be if worth of winOffset variable is larger then “50” (peak of header). When true will likely be returned, we are going to choose the “header” through “js-header” class and use “addClass()” jQuery technique to append class “mounted” to it. For case of false we are going to use related code, however as a substitute of “addClass()” technique “removeClass()” will likely be used, additionally with “mounted” as parameter.

jQuery:

if(winOffset > 50) {
 $('.js-header').addClass('mounted');
} else {
 $('.js-header').removeClass('mounted');
}

With this setting, every time will consumer scroll greater than 50 pixels from prime (peak of header), header will change mounted place, in any other case it’ll change to static.

Entire jQuery code:

$(operate() {
 $(window).scroll(operate() {
  var winOffset = doc.documentElement.scrollTop || doc.physique.scrollTop;
  if(winOffset > 50) {
   $('.js-header').addClass('mounted');
  } else {
   $('.js-header').removeClass('mounted');
  }
 });
});

Abstract

That’s it! Our aim was achieved and the problem was efficiently solved. I hope you loved this tutorial, realized one thing new or no less than mud off your CSS and jQuery abilities. AD

For those who favored this text, please subscribe so you do not miss any future submit.








If you would like to assist me and this weblog, you may turn out to be a patron, or you should buy me a espresso 🙂







Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.


Checkout extra Articles on Sayed.CYou

#Design #mounted #navigation #scroll #CSS #jQuery