在页面外滚动时保持页脚底部

Question

我制作了一个粘性页脚，当页面当前未滚动时效果很好。 但是为了动画 safari 和 chrome（也许还有其他）正在将我的页面移到其内容之外。这是一个在到达页面末尾时不会突然停止滚动的功能。 这是它的样子。

我怎样才能设法用我的页脚隐藏页面的外部？我想让它变成灰色，就像我的页脚一样。但它是白色的，我们可以看到我的蓝色侧边栏。这真的很丑。

有什么想法吗？

编辑：

这里是我用来使它变得粘稠的 Css

footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #434343;
    color: white;
    font-size: 12px;
    text-align: center;
    z-index:200;
}

我尝试使用 margin-bottom 负数使其更长，但导航器滚动更多，只是将问题向前移动了一些像素。

当然，我不希望滚动时有固定的页脚。 问题实际上是页面边缘的beaucoup。以及到达时的动画。

编辑2：

Here an sample code if you want to play with it

当我滚动太多时看到的内容（我不希望页脚后面的白色部分）

Answer 1

这里有一个解决方案。我做了一个简单而不是真正的页脚。但是当我滚动时，几乎不可能看到蓝色 div 之后的白色部分。这就是我想要的。

最后的问题是：它是最优的吗？我们可以不使用 js 吗？

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        //alert("you're at the bottom of the page");
        $('#footer').show();
    }
    else{
        $('#footer').hide();
    }
};

.footer{
  background-color:red;
  width:100%;
  height: 50px;
  display:none;
  position:fixed;
  bottom:0;
  z-index:-1;
}

.rectangle{
  background-color:blue;
  width:100%;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum justo ac tellus placerat, nec lacinia urna iaculis. Vestibulum eget tincidunt justo. Maecenas facilisis lectus at eros scelerisque, id bibendum risus gravida. Sed id ligula pharetra, lacinia nibh sit amet, ultrices tortor. Mauris vitae tortor rutrum, volutpat turpis sit amet, lobortis nunc. Pellentesque convallis est diam, sed vehicula lacus tempor ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="rectangle"></div>
<div id="footer" class="footer"></div>

Answer 2

您是否尝试过使用相应的 div 进行以下操作，或者分享您的代码以获得更好的答案。

     position:fixed;
     bottom: 0;
     width: 100%;