该博客介绍了一个需求，即当浮动菜单栏接近页面底部时，改变其定位方式以保持页面美观。通过JS监听滚动事件，计算全文高度与当前滚动高度的差值，当差值小于特定阈值时，将菜单栏的定位从fixed更改为relative。示例代码展示了如何实现这一功能。
需求：一个定位position:fixed;的菜单栏，移动到底部时依然存在，影响页面美观，我们希望当滚轮移到页面末尾时菜单栏更换为绝对定位。
解决：JS没有直接获取元素距离页面底部距离的函数，因此可利用全文高度-当前高度取得差值来间接判断。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onscroll = function() {
var t2 = document.body.scrollHeight;
var t1 = document.documentElement.scrollTop || document.body.scrollTop;
var t = t2 - t1;
console.log(t);
最低0.47元/天 解锁文章
扫一扫
1731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
