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)


Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

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