网站Footer显示异常：如何设置仅在页面底部进入视口时显示？

看起来你是被Bootstrap的navbar-fixed-bottom类给"坑"了——这个类的设计目的就是让元素固定在浏览器视口底部，和你说的Excel冻结窗格效果完全一致，这就是为什么不管页面滚动到哪里，它都能一直显示。下面给你两个针对性的解决方案：

1. 直接移除固定定位类（核心修复） #

最直接的办法就是删掉navbar-fixed-bottom这个类，让footer回到正常的文档流中，这样它就会跟着页面内容的底部走，只有当你滚动到页面最底端时才会显示出来。

修改后的HTML代码：

<footer class="footer"> 
  <div class="navbar navbar-inverse" role="navigation"> 
    <div class="container"> 
      <div class="navbar-text pull-left"> 
        <p>&copy: 2018 First-name Last-name</p> 
      </div> 
      <div class="navbar-text pull-right"> 
        <a href="#"><i class="fa fa-linkedin-square fa-2x "></i></a> 
        <a href="#"><i class="fa fa-github-square fa-2x"></i></a> 
        <a href="#"><i class="fa fa-twitter-square fa-2x"></i></a> 
      </div> 
    </div> 
  </div> 
</footer>

2. 处理短页面场景（可选优化） #

如果你的页面内容比较短，移除固定类后footer可能会跑到页面中间而不是视口底部。这时候可以用Flex布局来保证footer始终在页面的最底部（但不会固定）：

添加这段CSS代码：

html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
.footer {
  margin-top: auto;
}

这段代码会让页面自动分配空间，margin-top: auto会把footer"推"到页面的最下方——当内容很长时，它跟着内容走；当内容很短时，它会停在浏览器视口底部，但不会一直固定显示。

内容的提问来源于stack exchange，提问作者Swifty