How do I create a footer that is fixed at the bottom of the screen but when the user scrolls down it is no longer fixed footer?
Question
This is what I am trying to do:
I want to create a footer that sticks to the bottom of the user's screen regardless of the screen size. But when the user scrolls I want to be able to change the header from being fixed to going down as part of the page when the user scrolls down. I am new to JS but i've tried a few things such as this:
$(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function (e) {
var theEvent = e.originalEvent.wheelDelta || e.originalEvent.detail * -1;
if (theEvent / 120 > 0) {
if ($(window).scrollTop() == 0) {
$("#content_under_fixed_footer").hide();
}
}
else {
if ($(window).scrollTop() < $(document).height() - $(window).height()) {
$("#content_under_fixed_footer").fadeIn(2000);
$(".fixed_header").css("position", "relative");
}
}
});
If I use the script above, the trigger is not right. If the user has a large screen there is no scroll but if the window is shortened it relatively works well. Please help i need to submit this today and I'll try any solution. Thanks!
4 answers
solution1
1 2013-07-10 14:14:08
Have a look at this:
<html><head><title>Test</title>
<script type="text/javascript">
alert(screen.width + "x" + screen.height);
</script>
</head><body>
</body>
</html>
This way you can use the screen.width and screen.height directly, and calculate everything based on that.
solution2
1
HTML:
<div class='footer'>
footer
</div>
Style:
.footer {
position: fixed;
bottom: 0;
}
Jquery:
$(window).scroll(function(){
if($(window).scrollTop('0'){
} else {
$('.footer').css('position', 'relative');
}
});
This should work
solution3
1 2013-07-10 16:46:20
You mean something like this? ( jsFiddle )
HTML
<div id="content"></div>
<div id="wrapper">
<footer>Something</footer>
</div>
CSS
body
{
margin: 0;
}
#content
{
position: absolute;
height: 1000px;
background-color: red;
width: 300px;
}
#wrapper
{
position: absolute;
height: 100%;
}
footer
{
position: absolute;
bottom: 0px;
width: 300px;
text-align: center;
background-color: darkred;
}
solution4
1 2013-07-10 16:52:09
Important: height of footer, padding below content, margin 0 for html and body
Copy and paste the content inside the content to make it longer than height of window
HTML
<div class="wrapper">
<div class="header">HEADER</div>
<div class="content">
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
</div>
</div>
<div class="footer">FOOTER</div>
CSS
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.wrapper {
min-height: 100%;
}
.content {
padding-bottom: 50px;
}
.footer {
height: 50px;
background: #f00;
margin-top: -50px;
}
jsFiddle: http://jsfiddle.net/8QrGm/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.