js实现吸顶效果

最新推荐文章于 2023-12-20 16:59:20 发布

小斛~

最新推荐文章于 2023-12-20 16:59:20 发布

阅读量174

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/woyaodangxiaodi/article/details/122036885

版权

1.HTML结构

<header>网页头部区域</header>
<nav>网页导航区域</nav>
<main>网页内容区域</main>

2.css样式

        *{
            margin: 0;
            padding: 0;
        }
        header{
            width: 100%;
            height: 200px;
            background-color: yellow;
        }
        nav{
            width: 100%;
            height: 80px;
            background-color: #ccc;
        }
        main{
            width: 100%;
            height: 1000px;
            background-color: orange;
        }
        .fd{
            position: fixed;
            left: 0;
            top: 0;
        }

3.js效果实现

        //获取元素
        var nav = document.getElementsByTagName('nav')[0];
        //获取滚动距离
        window.onscroll = function() {
            //滚动距离兼容写法
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //判断
            if (scrollTop >= 200){
                nav.className = 'fd';
            } else {
                nav.className = '';
            }
        }