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

需求：一个定位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';
               }
           };
       </script>
       <style>
           * {
               margin: 0;
               padding: 0;
           }

body {
height: 1500px;
}

.box-t {
               height: 100px;
               width: 100px;
               background: #CCC;
               position: fixed;
               /* position: relative; */
               left: 81%;
               top: 83%;
           }

.box-b {
               height: 100px;
               width: 100px;
               background: #6CF;
               position: relative;
               right: -81%;
               bottom: -78%;
           }
       </style>
   </head>
   <body>
       <div id="box" class="box-b"></div>
   </body>
</html>

效果：

滚动条到达一定高度后更换class，实现不再绝对定位。

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

html 页面自动滚动,js监听html页面的上下滚动事件方法
最近在一个项目中,在写前端页面的时候,想像以前做Android时在页面时刻监听上下滚动的事件,查找资料发现由鼠标或类似用户动作触发的事件有以下图示: 不多说了,直接上代码了,经过测试可以使用: Dom ...
js监听html页面大小变化,JS监听窗口变化实时获取浏览器窗口大小
原理:通过监听窗口的变化来动态获取窗口大小用到的方法:addEventListener() 监听window的resize事件 js代码: // 定义事件侦听器函数 function watchWi ...
js监听html页面大小变化,js实时获取浏览器窗口大小
js实时获取浏览器窗口大小,我们可以使用addEventListener()方法来实现.该addEventListener()方法可以注册事件处理程序以侦听浏览器窗口resize事件,例如window ...
java计算器监听放大缩小,js监听页面放大缩小
demo body[zoom='scale']:before{ content: '您的网页处于缩放状态,请按 Ctrl+0 恢复到浏览器默认大小'; z-index: 9999; position: ...
js 监听安卓事件_百行代码实现js事件监听实现跨页面数据传输
百行代码实现js事件监听实现跨页面数据传输使用场景类似消息队列的使用场景,支持同页面和跨页面通信,发送消息和接收消息技术原理跨页面通信: 基于事件监听,通过监听 storage事件监听回调机制 ...
js监听audio播放完毕
js监听audio播放完毕 <!DOCTYPE html> <html> <head><meta charset="UTF-8">& ...
Vue.js 监听属性简单实例
Vue.js 监听属性 watch,可以通过 watch 来响应数据的变化. watch:用来监听每一个属性的变化 watch这个对象里面都是函数,函数的名称是data中的属性名称,watch ...
vue 组件属性监听_Vue.js 监听属性
# Vue.js 监听属性本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: ~~~ Vue 测试实例 - 菜鸟教程(runoob.com) ...
使用Node.JS监听文件夹变化
使用Node.JS监听文件夹改变有许多应用场合,比如: 构建自动编绎工具当源文件改变时,自动运行build过程,比如当你写CoffeeScript文件或SASS CSS文件时,保存之后可即时生成对应 ...
浮动导航栏php源码,JQuery 浮动导航栏实现代码
JQuery 浮动导航栏 /* 浮动导航栏 Begin */ #floatMenu { padding-top: 5px; background: url(http://img.jb51.net/im ...

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

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

最新文章

热门文章