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

需求:一个定位position:fixed;的菜单栏,移动到底部时依然存在,影响页面美观,我们希望当滚轮移到页面末尾时菜单栏更换为绝对定位。

解决:JS没有直接获取元素距离页面底部距离的函数,因此可利用全文高度-当前高度取得差值来间接判断。

demo

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';

}

};

body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}

ul,ol{margin: 0; list-style: none; padding: 0;}

a{ text-decoration: none;cursor: pointer;}

*{ 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%;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值