模拟导航栏固定

最新推荐文章于 2025-08-19 00:57:54 发布

转载最新推荐文章于 2025-08-19 00:57:54 发布 · 204 阅读

收录于

转载自：https://blog.csdn.net/u011724770/article/details/52415859

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height:3000px;
        }
        div{
            width:20vw;
            height:20vh;
            border:1px solid red;
            position:absolute;
            top:20vh;
            left:20vw;
        }
    </style>
</head>
<body>
    <div id="mydiv"></div>

    <script>
        var mydiv = document.getElementById( "mydiv" );
        //获得div据上边框的距离，然后保存起来，因为这个距离会改变
        var realTop=mydiv.getBoundingClientRect().top;
        //屏幕滚动事件
        window.onscroll = function(){
            //获得滚动条至顶部的距离
            var t = document.documentElement.scrollTop || document.body.scrollTop;
            //当滚动条滚动的距离超过了div据上边框的距离，那么就说明div要被遮盖了
            if(t>=realTop){
                //这个时候就不要再往上移动，直接固定位置，据上为0
                mydiv.style.position="fixed";
                mydiv.style.top="0px";
            }else{
                //否则，说明div据上还有距离，那么就取消固定布局，直接设大小
                mydiv.style.position="position";
                mydiv.style.top=(realTop-t)+"px";
            }
        }
    </script>
</body>
</html>