我怎样才能使页脚“沉"下去呢?滚动后? [英] 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 ).

如您所见，当您向下滚动时，顶部头部将停留在页面顶部，但也会溢出一点.这是通过stickyjs完成的.我也想对头部的底部做同样的事情，将其滚动一点以便在粘贴到页面底部的同时沉没"几个像素，所以有更多的可见性，但是无论我如何尝试，只是行不通.

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.

这是顶部的代码:

#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:

And here's the stickyjs that makes it stick:

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

请帮帮我. :(

推荐答案

您可以使用 jQuery .scroll() 函数来实现您要执行的操作.这是我创建的一些代码，非常适合您:

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%");
    }
});

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

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.

这篇关于我怎样才能使页脚“沉"下去呢?滚动后?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！