javascript - 滚动后如何制作粘性页脚 "sink"？

Question

我一直在疯狂地尝试让这一切发生，但我就是想不通(初学者)。

正如你所看到的，当你向下滚动时，顶部的头部部分会粘在页面的顶部，但也会溢出一点。这是用 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>

请帮帮我。 :(

Answer 1

您可以使用 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 设置为您选择的任何其他值。