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 {
    z-index:101;
    display: block;
    position: absolute; 
    bottom: 20%;
    width:100%;
    margin:0 auto;
    right:0;
    left:0;
    height:85px;
    background: url(../float.png) #fff 50% 50% no-repeat;
    text-indent:-9999px;
    overflow:hidden;
}

Here's the code for the bottom part:

#footerhead {
    z-index:100;
    position:fixed;
    left:0px;
    bottom:0px;
    margin:0 auto;
    height:20%;
    width:100%;
    background:url(../footer.png) #fff  50% 0  no-repeat;
}

And here's the stickyjs that makes it stick:

<script>
    $(document).ready(function(){
        $("#head").sticky({topSpacing:-70});
    });
</script>

Please help me out. :(

回答1:

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) {
        $("#footerhead").css("height","5%");
    } else if ($(this).scrollTop() < 500) {
        $("#footerhead").css("height","20%");
    }
});

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.

回答2:

This may work for you:

<!doctype html>
<html>
    <head>
        <title>Sticky Bottom</title>
        <style type="text/css">
            #head {
                z-index:101;
                position: relative;
                height:85px;
                width: 100%;
                background: none green;
            }
            #footerhead {
                z-index:100;
                position:relative;
                height:85px;
                width: 100%;
                background: none red;
            }
            .is-sticky #footerhead {
                position: fixed;
                top: auto !important;
                bottom: -10px;
                left: 0;
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://path_to/jquery.sticky.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#head").sticky({topSpacing:-10});
                $('#footerhead').sticky();
            });
        </script>
    </head>
    <body>

        <div id="head">
            HEAD
        </div>
        <div id="footerhead">
            FOOTERHEAD
        </div>
        <div id="content">
            <p>Content here..</p>
        </div>
    </body>
</html>

Could be jsticky error, but I see it adds top: -10px to each sticky element. Please note, the element becomes sticky and gets class is_sticky only after you scroll down the element (it cannot stay in footer).

来源：https://stackoverflow.com/questions/26726180/how-can-i-make-a-sticky-footer-sink-after-scrolling

标签

javascript

jquery

css

twitter-bootstrap

sticky-footer