0

这是我的代码

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $(document).ready(function() {
        $(window).scroll(function() {
    if ($(document).height() <= ($(window).height() + $(window).scrollTop())) {
    //Bottom Reached
    $("#WebFooter").css("display","block");
       }else {
    $("#WebFooter").css("display","none");
            }
        });
    });
</script>
<style>
    #WebFooter {
      position:fixed; bottom:0px; width:960; padding: 10px 0; background:#fff; border-top:1px solid #ccc; border-right:1px solid #ccc; border-left:1px solid #ccc; border-bottom:0px; box-shadow:0px 0px 3px 0px rgba(0,0,0,0.15); border-top-left-radius:3px; border-top-right-radius:3px; display: none;
    }


</style>

<div id="WebFooter">Footer Content</div>

当页面内容不足以构成显示滚动条时，是否可以在底部显示 div？截至目前，div 只会在页面滚动到底部时显示。但是，如果页面上没有足够的内容来显示滚动条，则 div 不会显示。如果您访问http://anewdaychurch.org，您可以看到我正在谈论的示例

4

2 回答 2

0

是的，使用“粘滞页脚”。

您可以在此处查看如何使用它：

http://ryanfait.com/sticky-footer

使用此解决方案，您将不需要使用 JS，但只需更改一点标记，这是一个“仅 CSS”的解决方案。

于 2013-06-27T07:02:16.170 回答
0

好吧，为您的页脚尝试这种样式。它应该始终可见。

.footer{
  position:fixed;
  width:100%;
  bottom: 0px;
  left: 0px;
  z-index:1;
}

它应该粘在那里

于 2013-06-27T07:20:40.747 回答