In this article, I will show you, how you can create navbar which shows when you scroll up.
Live demo link:- https://sumukha210.github.io/Toggle-navbar/
Github Repo link:- https://github.com/Sumukha210/Toggle-navbar
First you need to create 3 pages,
touch index.html style.scss app.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Toggle navbar</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<nav class="nav">
<div class="nav__container">
<div class="nav__logo">Navbar</div>
<ul class="nav__menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</nav>
<section>lorem3000 (and then press enter) </section>
<script src="./app.js"></script>
</body>
</html>
style.scss
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
overflow-x: hidden;
max-width: 100vw;
}
.flex {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav {
background-color: rgb(9, 190, 190);
box-shadow: 0px 0px 5px silver;
padding: 10px 0px;
position: fixed;
width: 100vw;
top: -10%;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.3s ease-in;
&.active__menu {
top: 0%;
opacity: 1;
visibility: visible;
pointer-events: visible;
}
&__container {
width: 90%;
margin: auto;
@extend .flex;
}
&__logo {
font-size: 2rem;
font-weight: bold;
}
&__menu {
@extend .flex;
list-style: none;
li {
a {
color: black;
text-decoration: none;
margin-right: 10px;
font-weight: 600;
}
}
}
}
section {
width: 90%;
margin: 8rem auto 2rem auto;
}
app.js
// Grab nav element from the dom
const nav = document.querySelector("nav");
// Creating variales
let scroll_position = 30;
let scroll_direction;
// Show Navbar when dom loads
nav.classList.add("active__menu");
// Create an scroll event listener
window.addEventListener("scroll", () => {
scroll_direction =
document.body.getBoundingClientRect().top > scroll_position ? "up" : "down";
scroll_position = document.body.getBoundingClientRect().top;
if (scroll_direction === "up") {
// If you are scrolling up, then add active menu class
nav.classList.add("active__menu");
} else {
// If you Scrolling down, remove the active menu class
nav.classList.remove("active__menu");
}
});
//Create Variables outside the scroll event listener
Top comments (0)