In this article I will show you how to change the style of a navigation bar as the user is scrolling through the webpage.
Midnight.js
Midnight is a jQuery library which allows you to change the style of your navigation menu for different sections of your website. Therefore when user is viewing different sections they will see a different kind of styled navigation menu.
Implementation
Let’s see a code example of using midnight.js
View Demo
<!doctype html>
<html>
<head>
<title>Change Header Style On Scroll</title>
<style>
/*navigation bar style*/
.navbar
{
position: fixed;
font-size: 30px;
width: 100%;
}
/*when this class is added to navigation bar its color changes to yellow*/
.yellow
{
background-color: yellow;
}
/*when this class is added to navigation bar its color changes to red*/
.red
{
background-color: red;
}
</style>
</head>
<body>
/*this is the navigation bar markup*/
<div class="navbar">
QNimate
</div>
/*data-midnight data attribute is added to different sections of webpage for which navigation style needs to be changed. data-midnight data attribute takes a class name which is to be added to the navigation menu.*/
/*when this section(or paragraph) enter the viewport, midnight.js adds "red" class to the navigation menu.*/
<p data-midnight="red">
</p>
/*when this section(or paragraph) enter the viewport, midnight.js adds "yellow" class to the navigation menu.*/
<p data-midnight="yellow">
</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="midnight.jquery.js"></script>
<script>
// Start midnight
$(document).ready(function(){
//This selector represent the HTML element(navigation bar) whose style will be changed. Midnight adds data-midnight classes to this HTML element.
$('.navbar').midnight();
});
</script>
</body>
<html>
<html>
<head>
<title>Change Header Style On Scroll</title>
<style>
/*navigation bar style*/
.navbar
{
position: fixed;
font-size: 30px;
width: 100%;
}
/*when this class is added to navigation bar its color changes to yellow*/
.yellow
{
background-color: yellow;
}
/*when this class is added to navigation bar its color changes to red*/
.red
{
background-color: red;
}
</style>
</head>
<body>
/*this is the navigation bar markup*/
<div class="navbar">
QNimate
</div>
/*data-midnight data attribute is added to different sections of webpage for which navigation style needs to be changed. data-midnight data attribute takes a class name which is to be added to the navigation menu.*/
/*when this section(or paragraph) enter the viewport, midnight.js adds "red" class to the navigation menu.*/
<p data-midnight="red">
</p>
/*when this section(or paragraph) enter the viewport, midnight.js adds "yellow" class to the navigation menu.*/
<p data-midnight="yellow">
</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="midnight.jquery.js"></script>
<script>
// Start midnight
$(document).ready(function(){
//This selector represent the HTML element(navigation bar) whose style will be changed. Midnight adds data-midnight classes to this HTML element.
$('.navbar').midnight();
});
</script>
</body>
<html>
