How To Create Sticky Footer That Scrolls Along Using CSS?

Sticky footer is a very cool feature on any website when you want to display certain things on your footer all the time no matter what you do with the website. A sticky footer is a footer which usually sticks to the bottom of a web page or website. A bottom sticky footer enables a publisher to get good amount of clicks on your footer. It can be any ads, social media or a cool welcome message which can be placed at this place.
Today, we will see two types of sticky footer.

Objective of this tutorial:

1. Create a floating sticky footer to the bottom of the page using CSS.
2. Create a sticky footer which stays on the page all the time.
3. Sticky footer that stays to the bottom when you SCROLL the page.
4. A fixed sticky footer.

Two types of sticky footer we shall see:

1. A simple fixed sticky footer.

2. Sticky footer that stays at the bottom when you scroll the page.

I guess, this method is the most easiest way to get the sticky footer using CSS.

Here is the code for the two types:

Simple Fixed Sticky Footer:

CSS:

.simplestickybar{
position:fixed;
color:#000;
left: 0px;
right: 0px;
bottom: 0px;
text-align:center;
height:60px;
background:red;
}

HTML:

<div class="simplestickybar">
</div>

Explanation:

We are creating a simple red bar at the bottom using the position:fixed CSS attribute, which doesn’t move the div element no matter what you do.
We are also positioning the bar to the bottom of the screen by using the left: 0px, right:0px and bottom:0px pixel positioning.

Floating Fixed Sticky Footer With Scroll Effect

CSS:

.simplestickybar{
position:fixed;
color:#000;
left: 0px;
right: 0px;
bottom: 0px;
text-align:center;
height:60px;
background:green;
}

HTML:

<div class="simplestickybar">
</div>

Explanation:

This is just a replica of the previous method, only difference is you are going to add more content to the web page.

Hope you liked this method of creating a simple sticky footer at the bottom of the page.

Thanks for viewing this tutorial. Enjoy the posts to come.

~iTechColumn