How to Create Sticky header, footer and sidebar using ScrolltoFixed

Website navigation is one of the most important thing in web design. Because navigation increase number of clicks to the particular post, ads and social sharing in whole website. Sticky header, footer and sidebar are very useful to increase navigation experience.
You can simply create sticky (fixed) header, footer and sidebar using jQuery Plugins.
Let get started.
First download ScrollToFixed jQuery plugin from github.
Extract downloaded file. Keep this jQuery file and html file in same folder. Other you need to connect this folder
files and your html file into right path.
Example my HTML and CSS file is:

<title> Demo Fixed Header and Sidebar </title>
aside, article, section, header, footer, nav {
display: block;
aside, article, section, header, footer, nav, html, body, p, h1, h2, h3, div {
margin: 0;
padding: 0;
html {
background: #EDEDED;
body {
margin: 0 auto;
background: #fff;
font: 90%/1.6 georgia,serif;
#header {
background: #E0B44C;
padding: 10px 10px;
color: #fff;
margin-bottom: 2em;
h1 {
text-align: left;
font-size: 2.5em;
font-weight: normal;
font-variant: small-caps;
letter-spacing: .1em;
p {
margin-bottom: 1em;
article {
text-align: justify;
article h2 {
font-size: 1.8em;
font-weight: normal;
margin-bottom: .2em;
aside {
font: .9em sans-serif;
aside h2 {
font-size: 1.2em;
margin-bottom: 1em;
#sidebar2 {
background: #FFE5A8;
padding: 10px 25px 10px 10px;
#footer {
background: #C79112;
font: 1.2em sans-serif;
text-transform: uppercase;
letter-spacing: .2em;
text-align: center;
color: #fff;
padding-top: 5px;
body {
width: 85%;
max-width: 1280px;
min-width: 960px;
article {
float: left;
width: 64%;
padding-left: 2.5%;
padding-top: 2.5%;
aside {
float: right;
width: 26%;
padding: 2.5% 2.5%;
section {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
padding-bottom: 1em;
margin-bottom: 1em;
section:last-of-type {
border-bottom: none;
footer {
clear: both;
padding: 25px 0 15px;
<div id="header">
<h1>Sticky Header</h1>
<h2>Web Design Demo</h2>
<section class="one">
<p> Some content about Sticky header</p>
<h2>sidebar 1</h2>
<p> Some content about Sticky header</p>
<div id="sidebar2">
<h2>sidebar 2</h2>
<p> Some content about Sticky sidebar</p>
<div id="footer">
<p>Copy Right information</p>

Here i need fixed header.footer and sidebar. So i create three CSS Ids such as <div id=”header”>, <div id=”sidebar2″> and <div id=”footer”>
Note: Check if you are assign CSS rules for the Ids, which you define for fixed header, footer and sidebar.
Step 1: Add this line inside </head> to connect jQuery

<script type="text/javascript" src=""></script>

Step 2: Connect extracted file ( jquery-scrolltofixed.js) to your html file.

<script type="text/javascript" src="jquery-scrolltofixed.js"></script>

Step 3: Write the java script code inside </head> tag to make header,footer and sidebar widget fixed.

<script type="text/javascript">
$(document).ready(function() {
$('#sidebar2').scrollToFixed( { marginTop: $('#header').outerHeight() + 5,limit: $('#sidebar2').offset().bottom } );
$('#footer').scrollToFixed( { bottom:0,limit: $('#footer').offset().bottom } );

Here $(‘header’).scroolltofixed(); give fixed header. But if you want to assign fixed sidebar and header you need to assign header height in sidebar property using marginTop.
If you want fix the header only just use,



$(document).ready(function() { });

Follow the same method for footer and sidebar widget. Here i am make only sticky sidebar widget, not whole sidebar. but you can change or assign new CSS Ids to make whole sidebar fixed.
If you need any additional tips to make changes read ScrolltoFixed plugin detail in github.

Leave a comment

Your email address will not be published. Required fields are marked *