Reputation: 3016
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%;
}
Upvotes: 0
Views: 97