CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
user1154435
user1154435

Reputation: 165

Fixed footer that expands when scrolled to bottom of page

I'd like to achieve pretty exactly a footer solution as shown here: http://downtothewire.co.nz/ppp-2010/

Only a narrow portion of the footer is displayed and fixed to the bottom of the browser window. When the user scrolls to the bottom of the page, the rest of footer is revealed.

I've found this here https://github.com/ark1/Sticky-Footer-jQuery-Plugin

But cannot get it to work... The suggested minimum usage code doesn't seem to help much: jsFiddle

Minimum CSS:

.liner {margin:0 auto;width:960px;}
#Footer {width: 100%;z-index:100;position:relative;overflow: hidden}

Ideal markup example:

<body>
<div id="Container" class="liner">
<p>Main content</p>
</div>
<div id="Footer">
    <div class="liner">
        <p>Centred footer content</p>
    </div>
</div>
</body>

Example usage:

$('#Footer').stickyfooter();

Apologies, my JS skills are less than poor, but I'd appreciate some help, or pointers to another existing script that would do this.

Many thanks.

Upvotes: 1

Views: 2475

Answers (1)

presidentnickson
presidentnickson

Reputation: 1085

Take a look at this fiddle here http://jsfiddle.net/c3VUy/3/

I saw a couple of problems with your fiddle. Firstly, because the container has no content it didn't have any height pushing the footer down, thus there was nothing to scroll down to to initiate the footer.

Secondly, the order of your javascript. You were calling the stickyfooter script before including it.

And the third is that because there was no content in your footer with any height, once it did reach the bottom it wouldn't expand.

Make sure you include

jquery.heyday.stickyfooter.js

Before you call

$(function() {
    $('#Footer').stickyfooter();
});

A few notes :

You will notice I have added these CSS rules, they shouldn't be required once your container and footer contain content. I have simply put them in for demonstration!

#Container{
    height:1000px;
}

#Footer p{
    height:300px;   
}

Upvotes: 1

Related Questions