<html>
<head>
<title>Sticky Navigation Example</title>
</head>
<body>
<header>
<div class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</header>
</body>
</html>body{
margin:0;
padding:0;
}
header{
height:500px;
background:url('https://via.placeholder.com/2048x2048') center no-repeat;
background-size:cover;
}
body{
/* Default navigation styling inside body tag */
.navigation{
background:#000;
ul{
list-style:none;
text-align:center;
margin:0;
li{
display:inline-block;
a{
display:block;
padding:10px 10px;
color:#fff;
text-decoration:none;
text-transform:uppercase;
}
}
}
}
/* Additional/updated Navigation styling inside body tag with class "scrolled" */
&.scrolled{
.navigation{
position:fixed;
width:100%;
}
}
}/* function to add 'scrolled' class in body tag when user scroll value is more than 200px */
function manageNavbar(){
var scroll = $(window).scrollTop();
if( scroll >= 200){
$('body').addClass('scrolled');
} else { // if scroll value goes less than 200px
//remove 'scrolled' class from body tag
$('body').removeClass('scrolled');
}
}
$(document).ready(function(){
manageNavbar();
});
$(window).scroll(function(){
manageNavbar();
});
External CSS
This Pen doesn't use any external CSS resources.