A navigation bar, Navbar for short, is a feature on webpages that has the link to all major pages of that website. Navbars are like the compass on any site.
Developers and user interface designers try to present a simple snapshot of the content of their websites on Navbars. They do this under very detailed, usually single-word headings.
Navbars semantically are better placed in the <nav></nav> tag inside the body of the HTML layout.
Navbars can be placed at the top, bottom, on the left or right sides of a webpage. Most Navbars, like the one on this platform, have the icon or/and name of the web page on the left part of it. The rest of the navigation is on the right.
Many actions are usually embedded in the scroll action on a webpage using JavaScript. In this same vein, the behavior of our Navbar can be controlled using the scroll action hooks.
In this shot, we present the steps involved in hiding a Navbar when the webpage is scrolled.
Create the HTML file and add the following codes:
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style></head><body><nav id="nav"><a href="#home">SIGNIN</a><a href="#news">SIGNUP</a><a href="#contact">BLOG</a></nav><div><!--div will contain lots of text to make the scroll bar come up on the page--></div>
This HTML file contains a <nav> tag in the body. This will be styled in a CSS file to produce a nice-looking top Navbar. This navbar will contain three navigation items, Login, Signup, and Blog. Next, we have the CSS file.
Add some styles to the HTML in the style tag inside the head element. Alternatively, we can add the link to an external CSS file in our HTML file. We add the following styles our stylesheet:
body {margin: 0;background-color: #f1f1f1;font-family: "Lucida Console", "Courier New", monospace;}#nav {background-color: #333;position: fixed;top: 0;width: 100%;display: block;transition: top 0.5s;}#navbar a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 15px;text-decoration: none;font-size: 17px;}#navbar a:hover {background-color: #ddd;color: black;}
With this CSS, the body is styled with a white background, and the font family is also indicated. The nav element is also given a background color of grey with a fixed position and a width of 100%. This will make the nav as long as the screen is in the horizontal orientation. Some styles are also given for the mouse hover. After controlling how the page appears using the styles, let us add some scripts. These will bring some functionality, like attaching some functions to the scroll action.
At this point, we are ready to add some lines of JavaScript to provide some functionality to our site:
<script>var pos1 = window.pageYOffset;window.onscroll = function() {var pos2s = window.pageYOffset;if (prevScrollpos > currentScrollPos) {document.getElementById("nav").style.top = "0";} else {document.getElementById("nav").style.top = "-50px";}pos1 = pos2;}</script>
In this JavaScript code, the variable pos2 holds a two-dimensional vertical scroll position of the page using the window.pageYOffset method. The top edge position is at the (0,0) coordinate with this method. Meanwhile, pos1 holds the position of the page when it is not being scrolled. A function is attached to the window.onscroll event. This function checks if the page’s position when not being scrolled (pos1) is greater in value than its position when it is scrolled (pos). When this condition is true, the top position is given a style value of 0, else -50. This makes it eventually become hidden.
Now our page is ready with the hide on-scroll functionality. In the code widget below, we shall combine the HTML, CSS, and JavaScript code to produce our fully-functional page.
The explanation of what happened in this code has been given earlier in the steps. This code here is simply a combination of all steps to produce our functionality.