el zndr el zndr - 9 months ago 38
CSS Question

How can I make a sticky footer "sink" after scrolling?

I've been trying like crazy to make this happen but I just can't figure it out ( beginner ).

As you can see, when you scroll down, the top head part will stick to the top of the page but also overflow a bit. This is done with stickyjs. I want to do the same thing with the bottom of the head as well, after scrolling a bit for it to "sink" a few pixels while sticking to the bottom of the page, so there's more visibility, but no matter what I try, it just won't work.

If anyone could help, I'd be thankful.

Here's the code on the top part:

#head {
display: block;
position: absolute;
bottom: 20%;
margin:0 auto;
background: url(../float.png) #fff 50% 50% no-repeat;

Here's the code for the bottom part:

#footerhead {
margin:0 auto;
background:url(../footer.png) #fff 50% 0 no-repeat;

And here's the stickyjs that makes it stick:


Please help me out. :(

Answer Source

You can use the jQuery .scroll() function to achieve what you're trying to do. Here's a little code that I've created which would work perfectly for you:

$(window).scroll(function() {
    if ($(this).scrollTop() > 500) {
    } else if ($(this).scrollTop() < 500) {

What happens is that if the user scrolls down 500px on your website, the height of the #footerhead div reduces to 5% thus hiding a larger part of the face and making the content area more visible. Next when the user scrolls back up, the height of the #footerhead div increases back to 20%. You can also set the value of scroll from 500px to any other value of your choice.