This tutorial will guide you through creating a sticky header that remains at the top of the viewport even when scrolling. We’ll achieve this effect using HTML, CSS, and a bit of JavaScript. The target outcome is a header that stays fixed, enhancing user experience.
Step 1: Setting up the HTML Structure
First, we need to create the basic HTML structure for our webpage. This includes a header containing a title and navigation, and a main content area.
HTML Code:
<header>
<h1>Sticky Header Pow!</h1>
<nav>
<a href="">Home</a>
<a href="">About</a>
<a href="">Gallery</a>
<a href="">Contact</a>
</nav>
</header>
<div class="wrapper">
<section id='steezy'>
<h2> This is some steezy stuff</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex libero cupiditate deserunt earum, fuga, ab labore esse animi, nihil est tenetur non delectus perferendis. Maxime accusamus ea rem sint at!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ut aspernatur omnis neque iusto. Veritatis rem ad atque optio perferendis. Dolorum qui consequatur, repellat soluta impedit porro totam molestiae sit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus iusto, omnis quas, rem minus cupiditate, sunt voluptates minima sint nemo ipsa itaque consequatur dolor, quam necessitatibus vitae. Quod, eaque, quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
</section>
<section id='real'>
<h2> Keepin' it real</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
</section>
<section id='big'>
<h2>Go big, or go home</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
</section>
</div>
</body>
Step 2: Styling with CSS
Next, we’ll style our header and the rest of the page using CSS. This includes setting the initial header height, background color, and positioning. We’ll also define the styles for the sticky header effect.
CSS Code:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #ecf0f1;
font-family: helvetica, arial, sans-serif;
font-size: 16px;
padding-top: 330px;
-moz-transition: padding-top 0.5s ease;
-o-transition: padding-top 0.5s ease;
-webkit-transition: padding-top 0.5s ease;
transition: padding-top 0.5s ease;
}
header {
width: 100%;
height: 300px;
background-color: #3498db;
text-align: center;
position: relative;
position: fixed;
top: 0;
overflow: hidden;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
header h1 {
font-size: 42px;
color: #fff;
line-height: 230px;
text-transform: uppercase;
font-weight: 100;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
header nav {
position: absolute;
bottom: 0;
height: 60px;
line-height: 60px;
width: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
header nav a {
color: #fff;
display: inline-block;
padding: 10px 15px;
line-height: 1;
text-decoration: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
header nav a:hover {
-moz-box-shadow: 0 0 0 1px #fff;
-webkit-box-shadow: 0 0 0 1px #fff;
box-shadow: 0 0 0 1px #fff;
}
h2 {
font-size: 34px;
text-transform: uppercase;
font-weight: 100;
line-height: 2;
color: #2c3e50;
}
p {
margin-bottom: 2rem;
line-height: 2;
color: #7f8c8d;
}
.wrapper {
width: 800px;
margin: 0 auto;
}
section {
padding: 20px;
margin-bottom: 40px;
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
/* Sticky Header Style */
/* ---------------------------------------- */
body.sticky-header {
padding-top: 100px;
}
body.sticky-header header {
height: 60px;
background-color: rgba(52, 152, 219, 0.9);
}
body.sticky-header header h1 {
-moz-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
}
Step 3: Adding JavaScript for the Sticky Effect
To make the header sticky, we’ll use JavaScript to detect when the user scrolls and modify the body and header classes accordingly.
JavaScript Code:
$(function(){
$(window).scroll(function(){
var winTop = $(window).scrollTop();
if(winTop >= 30){
$("body").addClass("sticky-header");
}else{
$("body").removeClass("sticky-header");
}//if-else
});//win func.
});//ready func.
Footer Assets Code:
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
Congratulations! You’ve successfully created a sticky header using HTML, CSS, and JavaScript. This technique enhances the usability of your website by keeping important navigation consistently visible.
