js 3行代码，最简易实现div效果悬浮

最新推荐文章于 2021-12-10 16:36:27 发布

weixin_30586257

最新推荐文章于 2021-12-10 16:36:27 发布

阅读量415

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/linnuo/p/7161161.html

版权

简易实现浮动效果的首要因素是：获取滚动条距离浏览器顶部的距离，下面直接贴代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js实现div效果悬浮</title>
    <style type="text/css">
        #parentDIV {
            height: 2000px;
        }
        #suspensionBox {
            width: 230px;
            height: 50px;
            border: 1.5px solid red;
            text-align: center;
            line-height: 50px;
            border-radius: 5px;
        }
        .scrollTop{
            position:fixed;
            top:100px;
        }
    </style>
    
    <script type="text/javascript">
    window.onscroll=function(){ 
        var t = document.documentElement.scrollTop||document.body.scrollTop;
        var suspensionBox = document.getElementById("suspensionBox"); 
        suspensionBox.className = "scrollTop";
    }
    </script>
</head>
<body>
    <div id="parentDIV">
        <div id="suspensionBox">我要在中间呀，上上下下呀</div>
    </div>
</body>
</html>

是不是超级简单，是不是超级爽哈哈哈~ （沧海一声笑，滔滔两岸潮~）

转载于:https://www.cnblogs.com/linnuo/p/7161161.html

weixin_30586257

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 3行代码，最简易实现div效果悬浮

简易实现浮动效果的首要因素是：获取滚动条距离浏览器顶部的距离，下面直接贴代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>js实现div效果悬浮</title> <style type="text/css...
复制链接

扫一扫