Creating a Fixed Header Navigation Bar with on scroll effect

by

Posted on 28 January 2018

In this article, we are going to create a simple Fixed Header with an on scroll effect using HTML5, CSS3 and a little bit of JavaScript, so before coding our header let us first understand how it is going to work.

Also Read: Creating an Icon Bar using HTML and CSS

We are going to divide the functionality of our header into two states

  • Static state, when the page will be loaded and not scrolled.
  • Scrolled state, the change in state of the header when the page will be scrolled.

Let us first see the first state, see the below image to understand clearly.

On Scroll Fixed Header Navigation Bar

The header along with Navigation bar will act as a single unit on top of the page. Now what we want is whenever the user will scroll the page and crosses the top offset of the nav bar, the navbar position will become fix.

For that we are going to use a simple condition to trigger the event, we are going to check if the top offset of the navigation bar is less than the number of pixels scrolled on the page.

if(header.offsetTop <= window.pageYOffset)

In the above condition header.offsetTop will give us the top offset of our header and window.pageYOffset will return the number of pixels scrolled. Initially, the value of window.pageYOffset will be 0.

So now let's start coding our header, create a new file index.html and write the following code into it.

<!DOCTYPE html>
<html>
<head>
<title>Header-CSS</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Francois+One|Carme" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<div class="header">
	<div class="header-menu">
		<div class="level2">
			<div class="level2-wrap">
				<div class="level2-left">
					<h1>WebSite Name</h1>
				</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="level3" id="myHeader">
			<div class="level3-wrap">
			<nav>
				<ul>
					<a href="#"><li>Home</li></a>
					<a href="#">About us</li></a>
					<a href="#">Contact us</li></a>
					<a href="#">Privacy Policy</li></a>
					<div class="clear"></div>
				</ul>
			</nav>
			</div>
		</div>
	</div>
</div>
<div class="main-body">
	<p>The navbar will stick to the top when you reach its scroll position.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
	<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
<script>
var header = document.querySelector("#myHeader");
var sticky = header.offsetTop;
window.onscroll = function(){ onScrollNav(header,sticky); }

</script>
</html>

Now let's provide some clean styling to our boring HTML page, create a new file style.css in the same directory and write the following code into it.

body{
	margin:0;
	padding:0
}

a{
	text-decoration:none;
	color:white;
}

.flt-left{
	float:left;
}
.flt-right{
	float:right;
}

.clear{
	clear:both;
}

.header{
	width:100%;
	margin:auto;
	background:rgba(0,0,0,0.25);
}
.level2{
	color:white;
	width:100%;
	background: #24C6DC;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #514A9D, #24C6DC);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #514A9D, #24C6DC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.level2-wrap{
	padding:1em 2.5em;
}
.level2-left h1{
	font-family: 'Francois One', sans-serif;
	color:white;
	font-size:2.3em;
	text-align:center;
}

.level3{
	background: #f8f8f8;
	border-bottom:1px solid #e5e5e5;
}

.level3-wrap, .level1-wrap{
	width:100%;
	max-width:1200px;
	margin:auto;
}

.level3 ul{
	padding:0;
	margin:0;
	list-style:none;
}

.level3 ul a{
	float:left;
	padding:18px 10px;
	font-family: 'Carme',Arial;
	transition:0.3s;
	font-weight:bold;
	color:#000;
	border-right:1px solid #e5e5e5;
}

.level3 ul a:hover{background:#fff;}

.main-body{
	width:100%;
	max-width: 1000px;
	font-family: 'Carme';
	line-height: 1.7;
	font-size: 1.1em;
	margin:auto;
}

.sticky{
	position: fixed;
	width: 100%;
	top:0;
}

Now we will write a simple JavaScript function which will be called by the onscroll event listener in the index.html file. Create a new file script.js and write the following code into it.

function onScrollNav(header,sticky){
  if(sticky <= window.pageYOffset){
    header.classList.add('sticky');
  }
  else{
    header.classList.remove('sticky');
  }
}

That's it, you have successfully created a cool header with the on scroll fixed effect.


If You Love this article, You Should Consider:

  • Like us on Facebook
  • Follow us on Instagram
  • Follow us on Twitter
  • Subscribe to our Newsletter.
  • Let us know your suggestions and queries in the comments below.

Thank you for your Love and Support

Share your thoughts

Search
Adverstisement
Adverstisement