Javascript 我怎样才能做一个黏糊糊的页脚；“水槽”；滚动之后？_Javascript_Jquery_Css_Twitter Bootstrap_Sticky Footer

Javascript 我怎样才能做一个黏糊糊的页脚；“水槽”；滚动之后？

javascript jquery css twitter-bootstrap

Javascript 我怎样才能做一个黏糊糊的页脚；“水槽”；滚动之后？,javascript,jquery,css,twitter-bootstrap,sticky-footer,Javascript,Jquery,Css,Twitter Bootstrap,Sticky Footer,我一直疯狂地想让这一切发生，但我就是想不出来（初学者）如您所见，当您向下滚动时，顶部标题部分将粘在页面顶部，但也会溢出一点。这是通过stickyjs完成的。我想对头部底部也做同样的事情，在滚动一点，让它“下沉”几个像素，同时粘在页面底部，这样就有了更多的可视性，但不管我怎么做，它都不会工作如果有人能帮忙，我会很感激的下面是顶部的代码： #head { z-index:101; display: block; position: absolute; bott

我一直疯狂地想让这一切发生，但我就是想不出来（初学者）

如您所见，当您向下滚动时，顶部标题部分将粘在页面顶部，但也会溢出一点。这是通过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;
}

下面是使它粘在一起的粘性：

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


$（文档）.ready（函数（）{
$（“#头”）。粘性（{topSpacing:-70}）；
});

请帮帮我（

这可能适合您：

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


粘底
#头{
z指数：101；
位置：相对位置；
高度：85px；
宽度：100%；
背景：非绿色；
}
#页脚{
z指数：100；
位置：相对位置；
高度：85px；
宽度：100%；
背景：无红色；
}
.是粘性的#页脚头{
位置：固定；
顶部：自动！重要；
底部：-10px；
左：0；
}
$（文档）.ready（函数（）{
$（“#头”）。粘性（{topSpacing:-10}）；
$（“#页脚”）.sticky（）；
});
头
页脚
内容在这里

可能是jsticky错误，但我看到它向每个粘性元素添加了

top:-10px

。请注意，只有在向下滚动该元素后，该元素才会变为粘性，并且获取类

是粘性的（它不能停留在页脚中）.
您可以使用该函数来实现您想要做的事情。以下是我创建的一个小代码，非常适合您：
$(window).scroll(function() {
    if ($(this).scrollTop() > 500) {
        $("#footerhead").css("height","5%");
    } else if ($(this).scrollTop() < 500) {
        $("#footerhead").css("height","20%");
    }
});

$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>500）{
$（“#页脚”）.css（“高度”、“5%”）；
}else if（$（this）.scrollTop（）<500）{
$（“#页脚”）.css（“高度”，“20%”）；
}
});

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