利用js实现右侧悬浮框

菜鸟一个abc122619

于 2020-06-14 14:42:06 发布

阅读量1.1k

点赞数

分类专栏：原生js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43465609/article/details/106745801

版权

本文介绍了如何使用JavaScript创建屏幕右侧的悬浮框，并探讨了对联悬浮框的实现原理及遇到的抖动问题。通过计算浏览器高度、滚动位置，调整元素位置，解决因浮动物体定位非整数导致的抖动现象。

摘要由CSDN通过智能技术生成

例子：屏幕右侧悬浮框

原理：oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + “px”;

浏览器窗体的高度

document.documentElement.clientHeight

浏览器滚动的高度

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

html内容区

<body style=" height:1600px;">
    <div id="div1"></div>
</body>

#div1 { position:absolute; right:0; bottom:0; width:100px; height:150px; background:green;}

js内容区

<script>
 
window.onscroll = function(){
    var oDiv = document.getElementById("div1");
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
     
    //oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + "px&#

最低0.47元/天解锁文章

菜鸟一个abc122619

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用js实现右侧悬浮框

例子：屏幕右侧悬浮框原理：oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + “px”;浏览器窗体的高度document.documentElement.clientHeight浏览器滚动的高度var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;html内容区<
复制链接

扫一扫

专栏目录