使用css 与 js 两种方式实现导航栏吸顶效果

原创

朦胧淡月 2022-10-23 00:51:11 博主文章分类：js进阶 ©著作权

©著作权归作者所有：来自51CTO博客作者朦胧淡月的原创作品，请联系作者获取转载授权，否则将追究法律责任

场景描述

简单的说一下场景描述：这个页面有三个部分组成的.
顶部的头部信息--导航栏--内容
当页面滚动的时候。导航栏始终是固定在最顶部的。
我们使用的第一种方案就是使用css的粘性定位 position: sticky;  [ˈstɪ ki]

先说一下css的position的属性

position的属性我们一般认为有
position:absolute
postion: relative
position:static 
position:fixed
position:inherit;
position:initial;
position:unset;
但是我最近发现了一个定位position:sticky 这个可以称为粘性定位。
这个粘性定位的元素会始终在那个位置

css 实现导航吸顶效果

<style>
    body {
        margin: 0;
    }
    
    .header {
        width: 100%;
        height: 80px;
        line-height: 80px;
        background-color: pink;
        text-align: center;
        font-size: 30px;
        color: #fff;
    }
    
    .navbar {
        width: 100%;
        height: 60px;
        line-height: 60px;
        background-color: green;
        text-align: center;
        /* 兼容 */
        position: -webkit-sticky;
        position: -ms-sticky;
        position: -o-sticky;
        /* 粘性定位*/
        position: sticky;
        left: 0;
        top: 0;
        color: #fff;
    }
    
    .content {
        height: 140px;
        background: rgb(13, 68, 218);
        margin-top: 4px;
        text-align: center;
        line-height: 140px;
    }
</style>
<body>
    <div class="header">我是头部信息</div>
    <div class="navbar" id="navbar">我是导航栏</div>
    <div class="content"> 我是内容 </div>
    <div class="content"> 我是内容 </div>
    <div class="content"> 我是内容 </div>
    <div class="content"> 我是内容 </div>
    <div class="content"> 我是内容 </div>
    <div class="content"> 我是内容 </div>
    <div class="content"> 我是内容 </div>
</body>

使用css 与 js 两种方式实现导航栏吸顶效果_导航栏

position:sticky 的特征的（坑）

1、sticky 不会触发 BFC。如果不知道 BFC 可以看这里。
2、样式表 z－index 无效。行内 style 写有效。【这个我没有去验证过】

js检测浏览器是否支持sticky属性

if (CSS.supports("position", "sticky") || CSS.supports("position", "-webkit-sticky")) {
    console.log('支持')
}

使用js实现滚动效果

当滚动高度 > 元素距离顶部的位置 我们需要 { 添加类,让元素固定定位}；否者移除类。
当滚动高度 > 元素距离顶部的位置 让占位元素显示在页面中。否者隐藏起来

<style>
    body {
        margin: 0;
    }
    
    .header {
        width: 100%;
        height: 100px;
        background-color: pink;
        text-align: center;
        line-height: 100px;
    }
    
    .navbar {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: green;
        text-align: center;
    }
    
    .position {
        width: 100%;
        height: 40px;
    }
 
    
    .fixed {
        position: fixed;
        top: 0;
        left: 0;
    }
    
    .hidecss {
        display: none
    }
    
    .content {
        height: 1140px;
        background: rgb(13, 68, 218);
        margin-top: 4px;
        text-align: center;
        line-height: 140px;
    }
</style>
<body>
    <div class="header">头部信息栏</div>
    <div class="navbar" id="navbar">中部导航栏</div>
    <!-- 占位要不然滚动的时候下面的内容就会顶上去原来的位置，导致一部分内容显示不完整-->
    <div class="position hidecss" id="position"></div>
    <div class="content"> 我是内容 </div>
</body>
下面是js代码
    var navbar = document.getElementById('navbar')
    var position = document.getElementById('position')
    var navbarTop = navbar.offsetTop; // 获取导航栏到父元素的顶部距离
    // 监听滚动
    window.onscroll = function() {
        // 获取滚动条距离顶部的距离
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        // 滚动高度>元素距离顶部的位置时添加类，否则移除类
        scrollTop > navbarTop ? navbar.classList.add('fixed') : navbar.classList.remove('fixed')
            // 控制占位内容是否显示
        scrollTop > navbarTop ? position.classList.remove('hidecss') : position.classList.add('hidecss')
    }

分享一下上面使用原生js——操作类名（HTML5新增classList）

classList.add( newClassName )；添加新的类名，如已经存在，取消添加。
可以使用扩展运算符添加多个类。或者多个类使用逗号隔开
div.classList.add("foo", "bar", "baz"); //或者多个类使用逗号隔开
//扩展运算符添加多个类
let manyclassArr = ['leiming1', 'leiming2']
domDiv.classList.add(...manyclassArr)

移除已经存在的类名;
classList.remove( oldClassName )
//移除多个类值
div.classList.remove("foo", "bar", "baz");

确定元素中是否包含指定的类名，返回值为true 、false；不可以检测多个类名
classList.contains( oldClassName );


如果classList中存在给定的值，删除它，否则，添加它；
classList.toggle( className )；

classList.replace( oldClassName，newClassName )；
将oldClassName，newClassName类名替换为oldClassName，newClassName。