How to create a CSS Sticky footer – on body scrolling – Amazing effect

sticky footer

CSS Sticky footer is going to show you, how to create a sticky footer on scrollable content and its reveal effects on page scroll down using CSS. Normally, we need JavaScript to perform scrolling effects related to different user actions on web pages.

Beautiful website design comes from each and every element, a single element works with the right property. Small animations and good color combination give a beautiful website. Here

We need to create a footer that appears from the bottom of the page while the user is scrolling down. Also, when they are scrolling the page up the footer needs to be hidden bottom of the page again.

To achieve this goal, first, we have to create a footer with a fixed position at the bottom of the screen and add some content and a footer to the page.

HTML

 <div class="container" style="margin-bottom:370px;position:relative;z-index:10;background:#fff;">
   <div class="content" style="padding:30px;">  
    Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down	<br/><br/>
	Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>
	Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>
	Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/> 
   </div>
   <div>
	  <img src="content.png" width="100%" style="display:block;" />
	</div>
 </div>
 <div class="content-footer">
  <img src="footer.png" width="100%" style="display:block;" />
 </div>

Give width and height to the footer, and fix its position to the bottom of the screen with the position:fixed; and bottom:0; properties.

Set the margin-bottom of the <body> tag equal to the height of the footer.

CSS

 <style>
 body{margin:0px;}
 .content-footer {
    position: fixed;
    bottom: 0;
    left: 0px;
    right: 0;
    padding: 0px 0 0;
    z-index:1;
    -webkit-transform: translate3d(0,0,0);
    background: #fff;
}
 </style>

In this code, we used two images. In the body, we used one image and in the footer, we used another image.

Executed By using position property, Here we will apply position fixed and position relative.

How does it work?

It’s very easy to use follow the below steps.

step1

copy CSS and paste in style.css page or paste under the head tag.

step2

add div structure in body page

OutPut

This way there will be enough space at the bottom for the footer to be visible when the user scrolls down the page.