Home » Tutorials » JavaScript » JQuery: Sticky Footer

JQuery: Sticky Footer

JQuery: Sticky Footer

Tutorial Details

  • Difficulty: Beginner
  • Technology: JavaScript
  • Supported Browser: IE, Firefox, Safari, Chrome, Opera

Do you want to make your website footer that always stick at the bottom of your browser, no matter how long the content is? Are you wondering how is the stciky footer done in CNET.com? No worries, onlyWebPro is going to show you how to create a sticky footer for your website.

HTML Structure

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sticky Footer | onlyWebPro.com</title>
</head>
<body>
<div id="wrapper">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at lectus in neque pretium vestibulum ac ac sem. Mauris sodales, lacus ut posuere laoreet, mauris neque molestie elit, congue luctus odio tortor vitae tellus. Nulla nisl erat, accumsan vel rhoncus non, posuere non urna. Donec sit amet tempor turpis. Aenean augue ipsum, varius a porttitor eget, congue rhoncus arcu. Mauris elit ligula, ornare vel laoreet et, auctor sit amet mauris. Morbi pretium tellus sed metus ullamcorper quis consectetur lorem vestibulum. Sed ut elit nisi. Vestibulum id purus mi, eu malesuada nisl. Sed dictum, neque at fringilla pulvinar, metus neque suscipit velit, non cursus urna dui a diam. Ut quam mauris, feugiat id aliquam et, dapibus in mauris. Nunc risus mi, egestas sit amet rutrum et, viverra eget augue. Nunc facilisis dictum risus, et facilisis ligula rhoncus nec. Aliquam a augue sit amet sapien pulvinar luctus consectetur et tellus. Fusce ornare orci non augue semper condimentum. Pellentesque felis elit, ullamcorper gravida adipiscing sed, sollicitudin nec odio.</p>
</div>
<div id="footer">
<p>This is my sticky footer</p>
</div>
</div>
</body>
</html>

Firstly, create a basic semantic HTML structure, with the #wrapper div that contains #content and #footer div as shown above. Note: Please make sure that your #footer is the last element in your website.

CSS

#wrapper {
	margin: 0 auto;
	width: 940px;
}

#footer {
	background: #000;
	color: #fff;
	height: 100px;
	text-align: center;
	width: 940px;
}

Add style to your HTML element. Setup the css properties such as background color, height, width and etc. for your #wrapper and #footer div as shown above.

JavaScript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
//Execute the function when window load
$(window).bind("load", function() { 
	
	   //setup the height and position for your sticky footer
       var footerHeight = 0,
           footerTop = 0,
           $footer = $("#footer");

       positionFooter();

       function positionFooter() {

                footerHeight = $footer.height();
                footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";

               if ( ($(document.body).height()+footerHeight) < $(window).height()) {
                   $footer.css({
                        position: "absolute"
                   }).animate({
                        top: footerTop
                   })
               } else {
                   $footer.css({
                        position: "static"
                   })
               }

       }

       $(window)
               .scroll(positionFooter)
               .resize(positionFooter)

})

Ok, now the magic is here! We utilize the JQuery to create the sticky footer for us. Import the latest JQuery into your document, then start to execute your JQuery function when the window loaded. Setup few variables such as footerHeight, footerTop and footer to hold the data of your sticky footer as shown above. Next, we assigns the height of footer to the footerHeight and get the current position of the scrollbar and position of the footer to footerTop.

Now, we need to check the height condition of the footer. If the height of the window is more than the height of the document.body and the footer, then we set the footer’s css property (position) to absolute and animate the footer and stick it to the bottom of the browser. Note: document.body is the element that contains the content for the document.

Final Code

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sticky Footer | onlyWebPro.com</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style>
#wrapper {
	margin: 0 auto;
	width: 940px;
}

#footer {
	background: #000;
	color: #fff;
	height: 100px;
	text-align: center;
	width: 940px;
}
</style>

<script type="text/javascript">
//Execute the function when window load
$(window).bind("load", function() { 
	
	   //setup the height and position for your sticky footer
        	footerHeight = 0,
           footerTop = 0,
           $footer = $("#footer");

       positionFooter();

       function positionFooter() {

                footerHeight = $footer.height();
                footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";

               if ( ($(document.body).height()+footerHeight) < $(window).height()) {
                   $footer.css({
                        position: "absolute"
                   }).animate({
                        top: footerTop
                   })
               } else {
                   $footer.css({
                        position: "static"
                   })
               }

       }

       $(window)
               .scroll(positionFooter)
               .resize(positionFooter)

})
</script>

</head>

<body>
<div id="wrapper">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at lectus in neque pretium vestibulum ac ac sem. Mauris sodales, lacus ut posuere laoreet, mauris neque molestie elit, congue luctus odio tortor vitae tellus. Nulla nisl erat, accumsan vel rhoncus non, posuere non urna. Donec sit amet tempor turpis. Aenean augue ipsum, varius a porttitor eget, congue rhoncus arcu. Mauris elit ligula, ornare vel laoreet et, auctor sit amet mauris. Morbi pretium tellus sed metus ullamcorper quis consectetur lorem vestibulum. Sed ut elit nisi. Vestibulum id purus mi, eu malesuada nisl. Sed dictum, neque at fringilla pulvinar, metus neque suscipit velit, non cursus urna dui a diam. Ut quam mauris, feugiat id aliquam et, dapibus in mauris. Nunc risus mi, egestas sit amet rutrum et, viverra eget augue. Nunc facilisis dictum risus, et facilisis ligula rhoncus nec. Aliquam a augue sit amet sapien pulvinar luctus consectetur et tellus. Fusce ornare orci non augue semper condimentum. Pellentesque felis elit, ullamcorper gravida adipiscing sed, sollicitudin nec odio.</p>
</div>

<div id="footer">
<p>This is my sticky footer</p>
</div>
</div>

</body>
</html>

That’s it! Now your footer is always stick to the bottom of the browser, no matter how long your body content is!!!

You may also interested in:


  • Private

    Slow and jerky, looks unnatural!

    • Thanks for your comment. It would be good, if you willing to share out your solution to make it works better. 🙂

      Regards,
      The Management of onlyWebPro.com

  • No Demo?

  • sem demostrar não adianta ensinar, antes de tudo mostre o resultado final, pra ver se vale a pena

  • Fred Manceaux

    here’s a more simple and better solution, http://www.codicode.com/art/the_best_sticky_footer.aspx

  • Msantos

    as seen on css-tricks.com

  • Md. Zikrul Ahsan Shawon

    Not working properly…

  • Dhanraj Manure

    Hi Thanks for great script but is there any way to stop animation and footer should stick bootom

Android, iOS Development Tutorials