导航固定头部跟着页面走 js代码

最新推荐文章于 2023-11-17 12:25:08 发布

前端小白~摸鱼专家

最新推荐文章于 2023-11-17 12:25:08 发布

阅读量736

点赞数 3

文章标签： css3 jquery javascript html5 html

本文链接：https://blog.csdn.net/jiakesi/article/details/106116023

版权

二级导航菜单导航栏滑动导航下拉导航展开收缩下拉导航菜单下拉菜单导航网址导航二级导航导航菜单插件树形导航收缩菜单侧边导航固定导航导航切换

话不多说上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .box {
        height: 2000px;
    }
    
    #wrap {
        background-color: rgba(0, 0, 0, 0.2);
        width: 100%;
        height: 100px;
    }
    
    #wrap[data-fixed="fixed"] {
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
    }
    
    .content {
        height: 2000px;
    }
    
    p {
        height: 500px;
    }
</style>


<body>
    <div class="box">
        <p>
            <div id="wrap"></div>
        </p>
        <div class="content">
            hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world
            hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello
            world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world
            hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world
            hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world
            hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello
            worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello
            world hello world hello world hello worldhello world
        </div>
    </div>

</body>

<script>
    var obj = document.getElementById("wrap");
    var ot = obj.offsetTop;
    document.onscroll = function() {
        var st = document.body.scrollTop || document.documentElement.scrollTop;
        obj.setAttribute("data-fixed", st >= ot ? "fixed" : "")

    }
</script>

</html>

女同学们纷纷表示，这年头不找个程序员老公，还真是连节日低价购物权都没了。