JavaScript代码实现二级导航栏滚动固定

呵呵呵★

已于 2024-08-28 11:47:26 修改

阅读量483

点赞数

分类专栏：前端开发文章标签： html5 javascript

于 2022-04-20 14:18:11 首次发布

本文链接：https://blog.csdn.net/weixin_46325878/article/details/124296394

版权

前端开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用JavaScript代码，在页面滚动时使二级导航栏在达到特定位置后固定在屏幕顶部，实现响应式的用户体验。

摘要由CSDN通过智能技术生成

通过滚动鼠标，来以此实现导航栏滚动到某个位置实现固定定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            font-size: 30px;
        }
        .box{
           width: 1000px;
            height: 100px;
            margin: 0 auto;
            background: #0f9;
        }
        .box1{
            width: 1000px;
            height: 300px;
            margin: 0 auto;
            background: #ff0;
        }
        .box2{
            width: 1000px;
            height: 400px;
            margin: 0 auto;
            background: #f0f;
        }
        .box3{
            width: 1000px;
            height: 50px;
            text-align: center;
            background: rgb(60, 0, 255);
            position: relative;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        
    </style>
</head>
<body>
    <div class="box">
        导航栏
    </div>
    <div class="box1">
        轮播区域
    </div>
    <div class="box3">
        二级导航栏滚动到某个位置固定
    </div>
    <div class="box2">
        内容区域
    </div>
    <div class="box2">
        内容区域
    </div>
</body>
<script>
    var box3=document.querySelector('.box3');
    var to=box3.offsetTop;//获取box1距离父级元素垂直距离
    document.addEventListener('scroll',function(){//给页面添加事件绑定（滚动事件，回调函数）
        if (window.pageYOffset>=to) {//window.pageYoffset整个页面垂直方向卷入
            box3.style.position='fixed';//启动固定定位
        }else{
            box3.style.position='relative';
        }
    })
</script>
</html>