介绍
在前端开发中，经常会遇到需要将一个元素固定在屏幕上的情况。比如，我们可能想要让网站的导航栏在滚动时一直保持在顶部位置。但是，如果一个元素被固定在了页面底部，那么就有可能会遮挡住一些重要的内容。
本文将介绍如何停止在页脚处的固定定位，并提供示例代码和解释。
解决方法
方案1: 使用JavaScript
一个简单的解决方案是，在元素到达底部时，使用JavaScript动态地更改其固定位置。
----- ------ - ---------------------------------
----- ------------ - --------------------
----- ------- - -----------------------------------
--------------------------------- -- -- -
----- -------------- - -------------- - -------------------
-- --------------- - ----------------- - -------------------- - ------------- -
--------------------- - -----------
------------------- - --
- ---- -
--------------------- - --------
------------------- - ---
-
---上面的代码通过检查窗口的滚动位置，决定页脚是固定还是绝对定位。当页面滚动到底部时，它将把页脚从固定位置更改为绝对位置（即：紧贴着页面底部），并且在滚动回到页面顶部时，它会将页脚恢复到其固定位置。
方案2: 使用CSS
另一个解决方案是使用CSS的flex布局属性：
----- ---- - ------- ----- - -------- - -------- ----- --------------- ------- ----------- ----- - -------- - ----- - - ----- - ------- - ------------ -- -
这里我们给HTML和body元素设置高度为100%，然后利用display:flex;实现一个flex布局。.wrapper类包含所有其他元素，并使用flex-direction:column属性将它们垂直排列。.content类使用flex: 1 0 auto属性来让它自动填充剩余的空间，而.footer类则使用flex-shrink: 0属性来防止它缩小。
这样，无论内容有多少，页脚都将始终位于底部。如果内容太少而无法铺满整个屏幕，则内容将被拉伸以占据剩余的空间。
结论
以上两种方法都可以帮助你解决在页脚处的固定定位问题。使用JavaScript的方法更加灵活，适用于不同类型的网站，而使用CSS的方法适合那些使用flex布局的网站。根据具体情况选择合适的方法即可。
参考文献
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29911