Adding a scroll-activated footer with jQuery

Posted: June 2nd, 2012 | Tags: CSS • jQuery • Tutorials | Posted in: CSS, jQuery, Tutorials

Note: This tutorial was originally published in 2012. The tips and techniques explained may be outdated.

The other day I was trying to think of a nice way to let people know that my photography is available for print and stock licensing. Initially I thought I’d just have a nice brightly coloured box at the bottom of the page, but that seemed pretty crap.

A trip back to the drawing board came up with the idea of displaying a dialogue as the user scrolls down the page a certain distance – much better! You can have a look at it here if you scroll down the page. It’s really simple to implement too!

The Javascript

In the <head> section of your page add the following code to grab the jQuery javascript library:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js?ver=1.7.0'></script>

Here is the tiny bit of code that displays and hides the dialogue:

<script type="text/javascript">
$(window).scroll(function() {
if ($(this).scrollTop() < 350) {

$("#footerBuyPrint").slideUp();

} else {

$("#footerBuyPrint").slideDown();

}
});
</script>

There are two things you may have to edit here, the first is the number of pixels scrolled before the dialogue appears if ($(this).scrollTop() < 350) {, the other is the ID of the container for the dialogue popup: $("#footerBuyPrint").slideUp(); and $("#footerBuyPrint").slideDown();.

The HTML

This is all you need to add to you page in terms of HTML:

<div id="footerBuyPrint">
    <p><strong>All images are available as prints or for licencing for print and web projects. Just get in touch via <a href="/contact/">the magic form</a>.</strong></p>
</div>

Obviously you’ll be wanting to add your own message to that. Simples :)

The CSS

These are just simple styles, you can make the box as fancy as you like.

#footerBuyPrint {
position:fixed;
left:0px;
bottom:0px;
height:15px;
width:100%;
display: none;
z-index: 2;
/* The following styles are optional, the ones above are not */
padding: 10px;
background: #018bd3;
border-top: 5px solid #ededed;
text-align: center;
}

The important thing to mention here is that a height needs to be declared in the CSS in order for the scroll animation to work. In my case i have it set to 15px (height:15px;), but you can set it to your own height.

That’s it, you’re done! Have fun!

Gordonmac Dot Com