Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create an On Scroll Fixed Navigation Bar with CSS?
The fixed navigation bar fix on the web page using the position property and even on scroll it remains intact. It sticks to the top. On a lot of websites these days, the navigation bar fix to the top. The top property is also used. By specifying the CSS position property, we can create a fixed navigation bar using CSS.
The syntax of position property in CSS is as follows −
Selector {
position: /*value*/;
}
Above, the value of the position property is fixed to set the fixed navigation bar.
Set a container for the navigation bar
First, set a div for the navigation menu. The <a> element is used to set the menu links −
<div id="navigation-bar"> <a class="active" href="#">Logo</a> <a href="#">SignUp</a> <a href="#">SignIn</a> <a href="#">More</a> </div>
Position the menu links
The float property is used to float the menu links to the left. The display property is set to block −
a {
float: left;
display: block;
margin-left: 2%;
padding: 2% 4%;
text-align: center;
color: black;
text-decoration: none;
font-size: 1.2em;
border: 0.5px ridge red;
}
Set the content
A container is created. Within that, the content is set in <p>. Also, the image is set within the container using the <img> −
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus ante quis odio rhoncus, sit amet porta nunc venenatis. Vivamus eu ex et risus vehicula semper eu eu elit. Aliquam tempor rutrum neque sit amet aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras non eros ex. Suspendisse placerat tincidunt tortor a semper. Etiam molestie justo ac sapien auctor maximus. Etiam ut ante sollicitudin, tempor mauris nec, malesuada purus. Nunc malesuada sem sed fermentum eleifend. Cras ultrices velit eu blandit lobortis.
</p>
<img src="https://images.unsplash.com/photo-1612305876291- c369fea489b3?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixlib=rb1.2.1&q=80&w=600" />
</div>
Fix the menu
To position the menu, use the position property and set it to fixed. The width for the menus are set to 100% −
.sticky {
position: fixed;
top: 0;
width: 100%;
background-color: yellow;
}
Set the script to position the navigation bar
On scroll, the sticker() function gets called. Under the sticker function if the YOffset of the page is higher than the offsetTop value, then the sticky menu enables −
<script>
let nav = document.getElementById("navigation-bar");
let sticky = nav.offsetTop;
window.onscroll = function() {sticker()};
function sticker() {
if (window.pageYOffset >= sticky) {
nav.classList.add("sticky")
} else {
nav.classList.remove("sticky");
}
}
</script>
Example
The following is an example of CSS position property to create an on scroll fixed navigation bar −
<!DOCTYPE html>
<html>
<head>
<style>
#navigation-bar {
overflow: hidden;
box-shadow: inset 0 0 20px green;
}
a {
float: left;
display: block;
margin-left: 2%;
padding: 2% 4%;
text-align: center;
color: black;
text-decoration: none;
font-size: 1.2em;
border: 0.5px ridge red;
}
a:hover {
box-shadow: inset 0 0 14px red;
font-size: 1.6em;
}
.content {
background-color: coral;
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
background-color: yellow;
}
.sticky + .content {
padding-top: 80px;
}
</style>
</head>
<body>
<div class="content"></div>
<div id="navigation-bar">
<a class="active" href="#">Logo</a>
<a href="#">SignUp</a>
<a href="#">SignIn</a>
<a href="#">More</a>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus ante quis odio rhoncus, sit amet porta nunc venenatis. Vivamus eu ex et risus vehicula semper eu eu elit. Aliquam tempor rutrum neque sit amet aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras non eros ex. Suspendisse placerat tincidunt tortor a semper. Etiam molestie justo ac sapien auctor maximus. Etiam ut ante sollicitudin, tempor mauris nec, malesuada purus. Nunc malesuada sem sed fermentum eleifend. Cras ultrices velit eu blandit lobortis.
</p>
<img src="https://images.unsplash.com/photo-1612305876291-c369fea489b3?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixlib=rb1.2.1&q=80&w=600" />
</div>
<script>
let nav = document.getElementById("navigation-bar");
let sticky = nav.offsetTop;
window.onscroll = function() {sticker()};
function sticker() {
if (window.pageYOffset >= sticky) {
nav.classList.add("sticky")
} else {
nav.classList.remove("sticky");
}
}
</script>
</body>
</html>
3K+ Views
