Question

我在页脚css方面遇到了一些困难。我希望它留在页面底部。在滚动到页面底部之前，我不希望它可见。

.footer{
    position: fixed;
    display: block;
    width: 100%;
    height: 80px;
    bottom: 0;
    float: none;
}

Answer 1

问题来自position: fixed;。

“fixed”表示它已固定在视口上。因此，请尝试删除position: fixed;

CSS : Position property

Answer 2

.footer {
    position: absolute;
    display: block;
    width: 100%;
    height: 0;
    bottom: 0;
    float: none;
    transition: height 1s ease-in-out;
}
.footer.active {
    height: 80px;
}

<script type="text/javascript">
    window.onscroll = function(ev) {
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            $(".footer").addClass('active');
        } else {
            $(".footer").removeClass('active');
        }
    };
</script>

<div class="footer">
    ...
</div>

页脚组件位置

2 个答案: