Page footer that can relocate when scrolling

Question

Let's say I have a footer that appears to be fixed to the bottom of the screen but when the user scrolls down i want ot display conetnt under that footer. After scrolling the footer show appear more like a screen wide header than a footer. How can I do that? I am new to this so I am a bit frustrated.

I want it to be like a fixed footer to begin with but as the user scrolls down i want the footer to then detach and not be fixed but act more like a header. And when the user goes back up it show go back to being fixed.

This is what i used for footer:

<div class="footer" id="footer">My Footer</div>

#footer
{
    clear: both;
    border: 1px groove #aaaaaa;
    background: blue;
    color: White;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    line-height: normal;
    margin: 0;
    position: fixed;
    bottom: 0px;
    width: 100%;
}

Question not clear. How can it stay at the bottom *and* have content after it? — techfoobar, Jul 10 '13 at 13:17
I want it to be like a fixed footer to begin with but as the user scrolls down i want the footer to then detach and not be fixed but act more like a header. And when the user goes back up it show go back to being fixed. — starbucks, Jul 10 '13 at 13:19

score 1 · Answer 1 · answered Jul 10 '13 at 13:37

1

JSFiddle

$(document).scroll(function() {     
if($(document).scrollTop() > 220) {   
    $('footer').css({
        'position': 'static' 
    });
  } else {
    $('footer').css({
        'position': 'fixed' 
    });
  }
});

Just amend the 220 to a value that suits your website.

answered Jul 10 '13 at 13:37

Dan

8,041
8
41
72

when the content goes udner the footer the footer should no longer be fixed. Thanks! – starbucks Jul 10 '13 at 13:59

Page footer that can relocate when scrolling

1 Answers1