滚动后如何使粘性页脚“下沉”？答案

【问题标题】：How can I make a sticky footer "sink" after scrolling?滚动后如何使粘性页脚“下沉”？
【发布时间】：2014-12-30 19:32:06
【问题描述】：

我一直在疯狂地尝试实现这一点，但我就是想不通（初学者）。

如您所见，当您向下滚动时，顶部头部部分会粘在页面顶部，但也会溢出一点。这是用stickyjs完成的。我也想对头部的底部做同样的事情，在滚动一点让它“下沉”几个像素同时粘在页面底部之后，所以有更多的可见性，但不管我尝试什么，它只是行不通。

如果有人能提供帮助，我将不胜感激。

这是顶部的代码：

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

这是底部的代码：

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

这是让它粘住的stickyjs：

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

请帮帮我。 :(

【问题讨论】：

标签： javascript jquery css twitter-bootstrap sticky-footer

【解决方案1】：

这可能对你有用：

<!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>

可能是 jsticky 错误，但我看到它在每个粘性元素中添加了 top: -10px。请注意，只有在您向下滚动元素后，该元素才会变得粘滞并获得类 is_sticky（它不能停留在页脚中）。

【讨论】：

【解决方案2】：

您可以使用jQuery .scroll() 函数来实现您想要做的事情。这是我创建的一段代码，非常适合您：

$(window).scroll(function() {
    if ($(this).scrollTop() > 500) {
        $("#footerhead").css("height","5%");
    } else if ($(this).scrollTop() < 500) {
        $("#footerhead").css("height","20%");
    }
});

如果用户在您的网站上向下滚动500px，则#footerhead div 的高度会降低到5%，从而隐藏了脸部的较大部分并使内容区域更加可见。接下来，当用户向上滚动时，#footerhead div 的高度又增加到20%。您还可以将滚动的值从 500px 设置为您选择的任何其他值。

【讨论】：