Animated Sticky Navbar

TITLE : Animated Sticky Navbar | Change Header on Scroll | HTML CSS and Vanilla JavaScript

Source Code :

HTML :

<html>

<head>

<title>

Animated Sticky Navbar

</title>

</head>

<body>

<h3>BRAND NAME</h3>

<ul>

<li><a href="#">Products</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pulvinar vitae magna non viverra. Sed tincidunt non dui sit amet mollis. Nunc quam magna, ornare ac ligula ac, egestas tempor nunc. Sed elementum, enim ac tempus bibendum, enim mauris semper nulla, sed cursus lectus metus quis orci. Fusce faucibus malesuada ex, ac scelerisque urna. Donec at ullamcorper metus, quis maximus orci. Donec porttitor lectus ac leo bibendum, nec suscipit justo venenatis. Cras imperdiet scelerisque consectetur. Praesent vestibulum rhoncus magna, a malesuada enim ultrices vitae. Morbi hendrerit felis in porta viverra. Nulla bibendum sed eros et euismod. Integer varius odio ligula, vel tristique tortor vulputate eu. Suspendisse fermentum, turpis eu dignissim porttitor, enim lorem faucibus odio, in facilisis est eros elementum nulla. Duis ut arcu a ligula blandit pretium et id felis. Fusce sodales ex id rhoncus egestas. Maecenas ullamcorper lobortis quam, non dictum enim ultrices quis.

Praesent ac enim ut mi consectetur malesuada sit amet a neque. Sed ultrices diam ut pharetra vulputate. Ut eu pulvinar mi. Morbi ultrices dolor augue, vel aliquet mi laoreet ut. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi libero ante, ullamcorper nec ex scelerisque, feugiat mattis velit. Phasellus non cursus libero. Morbi non eros ligula.</p>

</div>

</body>

</html>

CSS :

*{

margin:0;

padding: 0;

box-sizing: border-box;

}

body{

width:100%;

}

.navbar {

width:100%;

background-color: #f5f7f9;

padding: 15px 0;

display: flex;

justify-content: space-between;

align-items: center;

transition: 0.3s;

}

.newnavbar {

background-color: #dcedc1;

position: fixed;

padding: 12px 0;

}

.navbar h3{

font-size:1.3em;

font-family: Swis721 BT;

letter-spacing: 2.5px;

color:#333;

margin-left: 25px;

}

.newnavbar h3 {

color:#1b262c;

}

.links {

transition: 0.3s;

}

.links ul{

display: flex;

justify-content: space-between;

margin: 0 25px;

}

.links li {

list-style: none;

padding: 0 20px;

}

.links li a{

text-decoration: none;

outline: none;

font-size: 1.25em;

color:#ff6f00;

letter-spacing: 1.5px;

font-family: Futura Md BT;

padding:5px 15px;

transition: 0.3s;

}

.links li a:hover{

background-color: #333;

}

.newlinks li a{

color:#721b65;

transition: 0.3s;

}

.newlinks li a:hover {

background-color: #f5f7f9;

}

.imgDiv {

width:100%;

height: 100vh;

background: url('images/img.jpg');

background-size: 100% 100%;

background-attachment: fixed;

}

.para {

width:100%;

height: 100vh;

background-color: #f1f1f1;

}

.para p{

width:80%;

font-size: 1.25em;

color:#333;

text-align: justify;

padding: 100px 0;

margin:0 auto;

font-family: Swis721 BT;

}

JavaScript :

let navbar = document.querySelector('.navbar');

let links = document.querySelector('.links');

window.onscroll = function() {

var top = window.scrollY;

if(top>100){

navbar.classList.add("newnavbar");

links.classList.add("newlinks");

}

else{

navbar.classList.remove("newnavbar");

links.classList.remove("newlinks");

}