美文网首页程序员
BOM-实现fixed定位

BOM-实现fixed定位

作者: 悠哈121 | 来源:发表于2018-07-22 20:21 被阅读0次

描述:利用js实现类似于css fixed定位的效果,即滚动条拖动盒子的位置相对于浏览器窗口位置不改变

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        body{
            height:1000px;
        }
            div{
                background-color: red;
                width:100px;
                height: 100px;
                position: absolute;
                bottom: 0;
                right: 0;
            }

        </style>
        <script type="text/javascript">
        window.onscroll=function(){
            var div = document.getElementById('di');
            var scrollHeight =document.documentElement.scrollTop || document.body.scrollTop;
            var divHeight = div.offsetHeight;
            var clientHeight = document.documentElement.clientHeight ||  document.body.clientHeight;
            var top =  scrollHeight+clientHeight -divHeight+'px';
            div.style.top = top;
        }
        </script>

    </head>
    <body>
    <div id="di"></div>
    </body>
</html>
image.png

相关文章

  • BOM-实现fixed定位

    描述:利用js实现类似于css fixed定位的效果,即滚动条拖动盒子的位置相对于浏览器窗口位置不改变

  • css布局方案

    fixed定位 flex定位 栅格布局

  • css第五节

    position定位 absolute:绝对定位 static:自动定位 relative:相对定位 fixed:...

  • translate内不能包含fixed定位的元素

    translate内不能包含fixed定位的元素,否则 fixed属性失效

  • Vue——实现对数组的增删改查 & vue生命周期

    一、使用vue实现对数组的增删改查 提醒:绝对定位 + margin(例如position:fixed;top:0...

  • flex相关

    1、flex实现tab固定底部 tab固定底部一直以来使用fixed进行固定定位,下面是flex实现:

  • 2020-12-31-CSS定位

    默认定位 static 相对定位 relative 绝对定位 absolute 固定定位 fixed 粘性...

  • 定位+z-index总结(css篇)

    fixed+transform: fixed定位:一般会以窗口定位,当某一父级使用了transform:xxx属性...

  • 定位流

    定位流指的是:相对定位(relative)/绝对定位(absolute)/固定定位(fixed) 不包括静态定位(...

  • CSS补充2

    定位position 定位分为四种:相对定位 relative,绝对定位 absolute,固定定位 fixed,...

网友评论

    本文标题:BOM-实现fixed定位

    本文链接:https://www.haomeiwen.com/subject/norrmftx.html