jQuery Sticky Footer Expand onHover

By Sam Deering

Hey guys,

I’ve found this cool sticky footer plugin that uses jQuery and works like a treat! I found it on they have some pretty cool scripts on there. Thought it was worth the share!


About the plugin:

  • It expands on mouse hover upwards and then releases down on mouse out.
  • Works using the CSS property position:fixed
  • Works on all modern browsers
  • Can be positioned on bottom of screen or top
  • Has options you can tweak it to your liking! (see below)
var mystickybar=new expstickybar({
 id: "stickybar", //id of sticky bar DIV
 position:'bottom', //'top' or 'bottom'
 revealtype:'mouseover', //'mouseover' or 'manual'
 peekamount:35, //number of pixels to reveal when sticky bar is closed
 externalcontent:'stickybarcontent.htm', //path to sticky bar content file on your server, or "" if content is defined inline on the page
 speed:200 //duration of animation (in millisecs)




Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.