滚动顶部固定

最新推荐文章于 2023-05-19 10:26:16 发布

Wong.Tsing

最新推荐文章于 2023-05-19 10:26:16 发布

阅读量579

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/hdz52013/article/details/96483838

版权

前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>DIV滚动至顶部后固定</title>
    <style>
        .nav {
            position:relative;
            top:0;background:#00f;
            width:100px;
            height:100px
        }
    </style>
</head>
<body style="height:2000px;">
<div style="height: 200px"></div>
<div id="nav" class="nav">
    Test Div
</div>
<script type="text/javascript">
    function menuFixed(id) {
        var obj = document.getElementById(id);
        var _getHeight = obj.offsetTop;

        window.onscroll = function () {
            changePos(id, _getHeight);
        }
    }

    function changePos(id, height) {
        var obj = document.getElementById(id);
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop < height) {
            obj.style.position = 'relative';
        } else {
            obj.style.position = 'fixed';
        }
    }
    window.onload = function () {
        menuFixed('nav');
    }
</script>
</body>