How TO – Sticky/Affix Navbar

Example

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}

.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}

#navbar {
overflow: hidden;
background-color: #333;
}

#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

#navbar a:hover {
background-color: #ddd;
color: black;
}

#navbar a.active {
background-color: #04AA6D;
color: white;
}

.content {
padding: 16px;
}

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

.sticky + .content {
padding-top: 60px;
}
</style>
</head>
<body>

<div>
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>

<div id=”navbar”>
<a href=”javascript:void(0)”>Home</a>
<a href=”javascript:void(0)”>News</a>
<a href=”javascript:void(0)”>Contact</a>
</div>

<div>
<h3>Sticky Navigation Example</h3>
<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>
</div>

var navbar = document.getElementById(“navbar”);
var sticky = navbar.offsetTop;

function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add(“sticky”)
} else {
navbar.classList.remove(“sticky”);
}
}
</script>

</body>
</html>

How To Create a Sticky Navbar

Step 1) Add HTML:

Create a navigation bar:

Example

<div id=”navbar”>
  <a href=”#home”>Home</a>
  <a href=”#news”>News</a>
  <a href=”#contact”>Contact</a>
</div>

Step 2) Add CSS:

Style the navigation bar:

Example

/* Style the navbar */
#navbar {
overflow: hidden;
background-color: #333;
}

/* Navbar links */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}

/* Page content */
.content {
padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 60px;
}

Step 3) Add JavaScript:

Example

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}

.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}

#navbar {
overflow: hidden;
background-color: #333;
}

#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

#navbar a:hover {
background-color: #ddd;
color: black;
}

#navbar a.active {
background-color: #04AA6D;
color: white;
}

.content {
padding: 16px;
}

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

.sticky + .content {
padding-top: 60px;
}
</style>
</head>
<body>

<div>
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>

<div id=”navbar”>
<a href=”javascript:void(0)”>Home</a>
<a href=”javascript:void(0)”>News</a>
<a href=”javascript:void(0)”>Contact</a>
</div>

var navbar = document.getElementById(“navbar”);
var sticky = navbar.offsetTop;

function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add(“sticky”)
} else {
navbar.classList.remove(“sticky”);
}
}
</script>

</body>
</html>

Previous

Next