CODEWITHSUNDEEP
javascriptjquerycssscroll
starbucks
starbucks

Reputation: 3016

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?

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!

Upvotes: 1

Views: 179

Answers (4)

Populus
Populus

Reputation: 7680

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/

Upvotes: 1

Matěj Pokorn&#253;
Matěj Pokorn&#253;

Reputation: 17835

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;
}

Upvotes: 1

user2568107
user2568107

Reputation:

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

Upvotes: 1

Setup
Setup

Reputation: 330

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.

Upvotes: 1

Related Questions