What we are gonna today is something that you can always use it your projects, be it based on React or just normal projects with static content. This time the pinned Navigation bar on top will automatically hide whenever we scroll below a certain height like few hundred px or some VH. It’s pretty simple to understand how Auto-Hide Navigation Bar works. We just need to add an event through scrolling whenever one person scrolls below few pixels or whatever unit we want it to measure with.

I am not gonna use some external library but only general stuff from JS like functions, classes, CSS to align the content using flex-box, and making it work correctly. Anyways let’s dive into the code and see how it’s gonna look.

Preview

You might also like this.

How does this Auto-Hide Navigation Bar work?

Auto-hide navigation bar

Now that you have already seen how auto-hiding the navigation bar looks like, it’s time for me to explain the stuff behind the scenes. In order to make it possible, we will make 3 files, HTML, CSS and JS.

Inside the HTML file, I’ll create a container div that will contain all our basic code, inside it, there will be few child elements for the navbar and the dummy content below it. First, I will create a nav element for the navigation bar, it will contain the logo and the links. The logo will have a class-name of the logo and the links will have class-name of menu. Auto-Hide Navigation Bar is pretty easy, do your best to understand how it works.

CSS Part

Inside the CSS file, it’s pretty simple, just giving it a few pseudo-classes, for :hover etc. The stuff is pretty basic so I do not think that there is any need to explain it again and again.

JS part

So inside the JS file, I’ll first create a var with the name of AutoHideNavigation It’ll first store the current scroll position through the window.screenY function after that it’ll hide the navigation bar when scrolling exceeds the breakpoint, code it pretty simple you should be able to understand it easily, otherwise ask questions below in comments.

Source Code.

HTML.

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<TITLE>Evil Web Dev | Auto Hide Navigation Bar from Scroll</TITLE>
	<link rel="stylesheet" href="style.scss">
<script src="script.js"></script>
</head>

<body>
	<div class="container">
		<nav>
			<div class="inner-nav">
				<div class="logo">
					<img src="https://i.imgur.com/FvB8JeH.png" class='logo' />
				</div>
				<div class="menu">
					<ul>
						<li>
							<a href="#sec-1"> <span>link</span>
								<mat-ripple color="var(--ripple-color)"></mat-ripple>
							</a>
						</li>
						<li>
							<a href="#sec-2"> <span>link</span>
								<mat-ripple color="var(--ripple-color)"></mat-ripple>
							</a>
						</li>
						<li>
							<a href="#sec-3"> <span>link</span>
								<mat-ripple color="var(--ripple-color)"></mat-ripple>
							</a>
						</li>
						<li>
							<a href="#sec-4"> <span>link</span>
								<mat-ripple color="var(--ripple-color)"></mat-ripple>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<section id="sec-1">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil accusamus delectus facilis quod deserunt quisquam molestias ab odit reprehenderit assumenda, ipsum esse tenetur accusantium quibusdam mollitia ullam cumque commodi laborum recusandae perspiciatis libero eligendi? Consequatur ducimus et magni aperiam repellat, molestias ea iure, optio quo facere perferendis necessitatibus cumque dolorem eos alias numquam commodi, sed iusto sint temporibus! Sit, libero!</section>
		<section id="sec-2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil accusamus delectus facilis quod deserunt quisquam molestias ab odit reprehenderit assumenda, ipsum esse tenetur accusantium quibusdam mollitia ullam cumque commodi laborum recusandae perspiciatis libero eligendi? Consequatur ducimus et magni aperiam repellat, molestias ea iure, optio quo facere perferendis necessitatibus cumque dolorem eos alias numquam commodi, sed iusto sint temporibus! Sit, libero!</section>
		<section id="sec-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil accusamus delectus facilis quod deserunt quisquam molestias ab odit reprehenderit assumenda, ipsum esse tenetur accusantium quibusdam mollitia ullam cumque commodi laborum recusandae perspiciatis libero eligendi? Consequatur ducimus et magni aperiam repellat, molestias ea iure, optio quo facere perferendis necessitatibus cumque dolorem eos alias numquam commodi, sed iusto sint temporibus! Sit, libero!</section>
		<section id="sec-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil accusamus delectus facilis quod deserunt quisquam molestias ab odit reprehenderit assumenda, ipsum esse tenetur accusantium quibusdam mollitia ullam cumque commodi laborum recusandae perspiciatis libero eligendi? Consequatur ducimus et magni aperiam repellat, molestias ea iure, optio quo facere perferendis necessitatibus cumque dolorem eos alias numquam commodi, sed iusto sint temporibus! Sit, libero!</section>
	</div>
</body>

</html>

CSS.

@import url("https://fonts.googleapis.com/css?family=Roboto");
:root {
	--color-1: #0b5567;
	--color-2: #15a9ce;
	--bg-color: var(--color-1);
	--shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	--ripple-color: rgba(21, 169, 206, 0.2);
}
* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	padding: 0;
	font-family: "Roboto", sans-serif;
	scroll-behavior: smooth;
}
nav {
	background-color: #fff;
	position: fixed;
	box-shadow: var(--shadow);
	width: 100%;
}
.inner-nav {
	height: 50px;
	margin: auto;
	width: 100%;
	padding: 0 4%;
	display: grid;
	grid-auto-flow: column;
	justify-content: space-between;
	align-items: center;
}
.logo {
	width: 40px;
	height: 100%;
	display: grid;
	align-items: center;
}
.menu {
	height: 100%;
	display: grid;
	place-content: center;
}
.logo {
	width: 50px;
	height: auto;
}
ul {
	padding: 0;
	margin: 0;
	list-style: none;
	height: 100%;
	width: 400px;
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	grid-gap: 8px;
}
li {
	text-align: center;
	height: 32px;
	position: relative;
	border-radius: 3px;
	overflow: hidden;
}
a {
	color: inherit;
	text-decoration: none;
	height: 100%;
	display: grid;
	place-items: center;
	text-transform: capitalize;
}
a:hover {
	color: var(--color-2);
}
.ham-menu {
	width: 40px;
	height: 40px;
	display: grid;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	display: none;
	border-radius: 50%;
}
.ham-menu:hover .menu-lines {
	fill: var(--color-2);
}
section {
	height: 100vh;
	background-color: #fff;
	display: grid;
	align-items: center;
	padding: 0 4%;
	line-height: 2;
	font-size: 18px;
}
section:nth-child(odd) {
	background-color: var(--bg-color);
	color: #fff
}
@media (max-width: 800px) {
	ul {
		display: none;
	}
	.ham-menu {
		display: grid;
	}
}
@media (max-width: 450px) {
	.inner-nav,
	section {
		padding: 0 6%;
	}
	section {
		line-height: 1.7;
		font-size: 16px;
	}
}

Javascript.

var AutoHideNavigation = /** @class */ function () {
	function AutoHideNavigation(options) {
		this.options = options;
		/** Store the current scroll position */
		this.scrollPos = window.screenY;
		this._init();
		this._attachEvents();
	}
	AutoHideNavigation.prototype._init = function () {
		this.navHeight = this.options.elem.offsetHeight;
		/** Store the nav element for easier accessability. */
		this.elem = this.options.elem;
		/** Hide the nav element if the initial scroll position is bigger than the break point */
		if (window.scrollY > this.options.breakPoint) {
			this.elem.style.transform = "translateY(" + this.navHeight * -1 + "px)";
		}
	};
	AutoHideNavigation.prototype._attachEvents = function () {
		window.addEventListener('scroll', this._onScroll.bind(this));
	};
	AutoHideNavigation.prototype._onScroll = function () {
		/** scrolling down */
		if (window.scrollY - this.options.threshold > this.scrollPos && window.scrollY > this.options.breakPoint) {
			this._addStyles('down');
			this.scrollPos = window.scrollY;
		}
		/** scrolling up */
		if (window.scrollY + this.options.threshold < this.scrollPos) {
			this._addStyles('up');
			this.scrollPos = window.scrollY;
		}
	};
	AutoHideNavigation.prototype._addStyles = function (dir) {
		var transY;
		if (dir === 'up') {
			transY = 0;
		} else {
			transY = this.navHeight * -1;
		}
		this.elem.style.cssText = "\n            transition: " + this.options.animationSpeed + "ms ease-in-out all;\n            transform: translateY(" + transY + "px)\n        ";
	};
	return AutoHideNavigation;
}();
var navigation = new AutoHideNavigation({
	elem: document.querySelector('nav'),
	breakPoint: 50,
	animationSpeed: 300,
	threshold: 10
});

So this is how we do our Auto Hide Navigation Bar, below is the codepen.

CodePen.

See the Pen Auto Hide NavBar by Kamran Tahir (@Mah3svara) on CodePen.

unsplash-logoJoseph Barrientos
0 CommentsClose Comments

Leave a comment