in this tutorial, I will show you how to make an animated sticky navbar on scroll using HTML CSS and a little bit of JavaScript.
this effect is pretty simple and will make your website looks awesome, and it will make your navigation menu always visible and this will improve your user experience. now I will show how this work then I will give you the source code.
How it works?
for this tutorial, we will use a Javascript script to detect the top position of our navbar, when the windows top passe this line we will add a class that will make our navbar fixed and change the style. To do that we will just add this script after our body tag
the script :
<script>
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("stick")
} else {
navbar.classList.remove("stick");
}
}
window.onscroll = function() {
myFunction()
};
</script>
and know that we know how it works I will give you the full source code.
HTML CODE
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<p>hello</p>
<div id="navbar" class="Nav">
<div class="container">
<img class="logo" src="logo.png">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">courses</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div>
</div>
<div class="header">
<h1> Sticky nav bar in HTML and CSS</h1>
</div>
<div class="article">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non sapien in felis hendrerit eleifend. Morbi vel erat sit amet ipsum semper vulputate in a turpis. Curabitur in mattis elit. Sed tortor libero, condimentum non leo vel, mollis vehicula orci. Morbi facilisis dui vitae est dictum dapibus. Quisque egestas porttitor est, in gravida neque pretium placerat. Ut feugiat varius turpis, eu pretium purus dapibus vitae. Aliquam efficitur pulvinar aliquet. Nunc sit amet placerat mi. Morbi et sem eleifend, mattis magna et, elementum leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce at neque lorem. Cras consectetur vitae quam at interdum. Vivamus vulputate magna nec urna bibendum fermentum. Suspendisse potenti. Phasellus nisi tortor, gravida suscipit rutrum id, sodales sit amet dolor. Duis porta nisl enim, nec euismod dui gravida a. Donec nulla diam, fringilla id nibh et, porttitor euismod orci. Suspendisse potenti. Cras dapibus tellus euismod enim dapibus venenatis. Suspendisse volutpat lorem enim, a posuere odio aliquet ut. Integer mollis augue ex, sit amet sollicitudin metus egestas nec. Nullam id eleifend neque. In finibus sollicitudin nunc nec semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc luctus eleifend arcu, a sollicitudin mauris elementum eu.
Proin in lacinia urna. Vestibulum at justo convallis, suscipit dolor non, blandit justo. Nam consectetur id justo non interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed commodo ligula eu massa venenatis finibus. Quisque elementum erat nec gravida posuere. Morbi risus sapien, ornare a pulvinar pharetra, tincidunt quis ligula. In ut blandit massa. Etiam facilisis libero in pretium placerat. Nulla ut commodo enim, quis aliquam urna. Praesent vitae augue sagittis leo cursus consequat quis id ante. Vivamus at est eu tortor semper tempus id quis diam. In eget rutrum libero.
Maecenas consequat sapien est, quis imperdiet diam vehicula in. Maecenas quis augue sed ante egestas bibendum vitae eget nisi. Maecenas ut pharetra erat, sit amet volutpat arcu. Duis convallis erat a massa posuere pellentesque. Etiam sapien magna, pulvinar nec eleifend nec, fermentum sit amet tellus. Phasellus accumsan dapibus ultrices. Proin ut dui eget justo pharetra congue et sed neque. Morbi vel mauris sit amet sapien bibendum lacinia vel nec elit. Sed eu pharetra lacus. Nulla luctus dignissim mauris et pretium. Nulla magna lacus, finibus ac arcu at, hendrerit accumsan orci. Suspendisse potenti. Cras posuere scelerisque turpis eu posuere. Etiam mauris augue, viverra sed eros sit amet, ornare blandit ante. Praesent quis varius leo.
Maecenas congue finibus nisl, et dignissim erat ultricies id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. In ultrices ac arcu quis venenatis. Curabitur massa lorem, gravida vitae aliquet ut, maximus a odio. Nullam vulputate maximus semper. Nunc lobortis auctor tellus a ullamcorper. Fusce semper sem eu dui commodo efficitur. Nam non pulvinar risus, eu tristique libero. Aenean laoreet nulla libero, quis faucibus orci laoreet id.
</p>
</div>
</div>
</body>
<script>
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("stick")
} else {
navbar.classList.remove("stick");
}
}
window.onscroll = function() {
myFunction()
};
</script>
</html>
CSS CODE
*{
margin: 0;
padding: 0;
outline: 0;
}
.container{
width: 80%;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.Nav{
position: relative;
width: 100%;
padding: 5px 0;
box-shadow: 0 0px 2px black;
overflow: auto;
}
.Nav img{
width: 200px;
transition: .4s;
padding: 0 15px;
float: left;
border-right: 1px solid #212121;
}
.Nav ul{
margin-left: 25px;
}
.Nav ul li{
display: inline-block;
margin-left: 15px;
margin-top: 35px;
transition: .4s;
}
.Nav ul li a{
font-size: 1.3rem;
text-decoration: none;
text-transform: uppercase;
color: #212121;
transition: .4s;
}
.stick{
position: fixed;
background-color: #fff;
z-index: 999;
top: 0;
}
.stick + .header{
padding-top: 60px;
}
.stick img{
width: 120px;
}
.stick ul li{
margin-top: 20px;
}
.stick ul li a {
font-size: 1.1rem;
}
.header {
height: 500px;
background-image: url(https://images.unsplash.com/photo-1559311745-a57f6233488e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1634&q=80);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.header h1{
position: relative;
top: 50%;
left: 50%;
text-align: center;
font-size: 3rem;
color: #212121;
transform: translate(-50%);
}
.article .container{
width: 60%;
}
.article p{
padding: 30px 0;
line-height: 2rem;
font-size: 1.3rem;
}
.article p::first-letter{
font-size: 3rem;
float: left;
line-height: 2.5rem;
}
Other application of this technique
you can use this method in many other ways for example if you want to make your ads fixed while the user is reading your article or make a section that contains some information fixed while the user navigates over your website.
STICKY NAVBAR ON SCROLL USING HTML CSS AND JAVASCRIPT
Reviewed by Medics
on
June 03, 2019
Rating:
Reviewed by Medics
on
June 03, 2019
Rating:
No comments: