How to create an Affix or sticky Navbar ?
Last Updated :
05 May, 2025
To create an affix or sticky navbar, you need to use HTML, CSS, and JavaScript. HTML will make the structure of the body, CSS will make it looks good. This kind of sticky navbar looks attractive on the website. By using JavaScript, you can easily make the navigation bar sticky when the user scrolls down.
Glimse of Affix/sticky Navbar

Creating Structure: In the HTML section, we will create a basic website structure for the sticky navbar when the user scrolls down the page it will display the effect.
Designing Structure: In CSS and JavaScript section we will design the structure for the navigation bar and make the scroll-down effect on the navbar using JavaScript.
html
<!DOCTYPE html>
<html>
<head>
<title>How To Create a Affix Navbar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Special+Elite&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20191128123949/cover1.png">
</div>
<div id="navlist">
<b>GeeksforGeeks</b>
<a href="javascript:void(0)">Contact us</a>
<a href="javascript:void(0)">Careers</a>
<a href="javascript:void(0)">Our Product</a>
<a href="javascript:void(0)">About us</a>
<a href="javascript:void(0)">Home</a>
</div>
<div class="scrollable" style="padding:15px 15px 4500px;">
<b>BLACK FRIDAY</b>
<p>
Want to get huge discounts on GeeksforGeeks
Courses? This Black Friday, we are bringing
the shopping festival to you!!! GeeksforGeeks
is celebrating Black Friday on 29th November
2019 by providing you huge discounts on all
its courses for the entire day! This will be
a great opportunity for you to learn and
enhance your skills. And that’s not all we
are offering!
</p>
<p>
There will also be Flash Sales that will go
live for a particular duration of time where
you can expect heavy discounts over a few
courses in addition to the existing discounts.
These Flash Sales will go live for 4 times
during the entire day with different courses
in each flash sale. Want to know more about
Black Friday? Read on to find out!
</p>
<p>
Black Friday is the Friday immediately after
Thanksgiving in the United States, which is
on 29th November this time. This Black Friday
Sale is intended to provide you with the best
courses along with great deals where the
investment of your time and money will surely
pay off. So Grab this opportunity, Grab the
deals and celebrate this Black Friday in the
most amazing way possible!!!
</p>
<center>
<h3>Black Friday Sale Highlights</h3>
</center>
<p>
This Black Friday, GeeksforGeeks is here with
some Red Hot new deals on online and offline
courses. Unbelievable offers will also be back
in Flash Sales but you need to be quick to get
them. Here’s everything you need to know about
the Black Friday sale by GeeksforGeeks:
</p>
<h4>All Day Super Sale On All Courses:</h4>
<p>
There will be a Super Sale on all the available
courses for the whole day of Black Friday. So
you can buy your favorite courses at premium
prices and learn a lot!
</p>
<h4>4 Flash Sales On Selected Courses:</h4>
<p>
There will be In Between Flash Sales on different
courses for 1 hour each on Black Friday. These
sales will reduce the prices of already discounted
courses even further. Stay tuned to find out the
times for different courses on the Flash Sale!
There are Limited seats so the discount will be
available on First Come First Serve basis.
</p>
<h4>Social Media Contest:</h4>
<p>
There will also be a Social Media Contest about
“Guessing the Price of a Course” on the Black
Friday Sale. Try your Luck!! Hefty discounts will
be live on the following courses for the complete
day. Grab them and pave the way to your dream
product-based company!
<hr>
<i>
All the details you will get by clicking this
<a href=
"https://www.geeksforgeeks.org/black-friday-sale-programmers-have-carts-geeksforgeeks-has-deals/">
link</a>
</i>
</div>
</body>
</html>
CSS
<style>
body {
margin: 0;
}
.header {
text-align: center;
width: 100%;
}
#navlist {
overflow: hidden;
background-color: #0074D9;
}
/* navlist designing */
#navlist a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* navlist link hover effect */
#navlist a:hover {
background-color: #ddd;
color: black;
}
#navlist b{
margin-top: 4px;
padding: 8px 12px;
color:lime;
float: left;
font-size: 22px;
}
/* scroll portion design */
.scrollable b {
font-family: 'Special Elite', cursive;
font-size: 28px;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
</style>
JavaScript
<script>
window.onscroll = function() {myFunction()};
var navlist = document.getElementById("navlist");
var sticky = navlist.offsetTop;
/* Function to stick the nav bar */
function myFunction() {
if (window.pageYOffset >= sticky) {
navlist.classList.add("sticky")
}
else {
navlist.classList.remove("sticky");
}
}
</script>
Output

Similar Reads
How to create a top navigation bar using CSS? A top navigation bar is a horizontal bar that typically contains links to different sections of a website. It is a fundamental part of a website's layout and helps users navigate easily. In this article, we will explore different approaches to creating a top navigation bar using CSS. These are the f
3 min read
How to Create a Sticky Element using CSS? A sticky element is a positioning technique in CSS that allows an element to behave like a relatively positioned element until a specific scroll position is met, after which it behaves like a fixed element. This is particularly useful for creating sticky headers, sidebars, or any other UI elements t
3 min read
How to set sticky navbar only for first section of page? Earlier Bootstrap gave the option to set navbar fixed for certain sections and absolute for others in Affix jQuery plugin but the new Bootstrap 4.0 dropped this option and recommended to use javascript for that. We can use Javascript to set the navbar as sticky for the first section and absolute for
4 min read
Foundation CSS Top Bar Sticky Navigation Foundation CSS is a free and open-source front-end framework for developing flexible web designs. It's one of the most powerful CSS frameworks, and it delivers a responsive grid, as well as HTML and CSS UI components, templates, and more, across all platforms. It also has several JavaScript Extensio
7 min read
Create a Sticky Social Media Bar using HTML and CSS Build a Sticky Social Media Bar with HTML and CSS, integrating Font Awesome icons for stylish and functional social links. Utilize CSS positioning to ensure the bar stays visible while users scroll, enhancing website engagement and accessibility.ApproachCreate a basic site structure of an HTML file
3 min read