【浮动导航栏的定位】JS监听动态页面元素距离底部距离，并修改定位样式

最新推荐文章于 2023-09-23 14:27:24 发布

icebns

最新推荐文章于 2023-09-23 14:27:24 发布

阅读量8k

点赞数 1

分类专栏： web前端基础

本文链接：https://blog.csdn.net/icebns/article/details/82881471

版权

需求：一个定位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);
               var oBox = document.getElementById("box");
               if (t <= 700) {
                   oBox.className = 'box-b';
               } else {
                   oBox.className = 'box-t';
               }

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

icebns

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【浮动导航栏的定位】JS监听动态页面元素距离底部距离，并修改定位样式

需求：一个定位position:fixed;的菜单栏，移动到底部时依然存在，影响页面美观，我们希望当滚轮移到页面末尾时菜单栏更换为绝对定位。解决：JS没有直接获取元素距离页面底部距离的函数，因此可利用全文高度-当前高度取得差值来间接判断。<!DOCTYPE html><html> <head> <meta charset="...
复制链接

扫一扫