场景描述

简单的说一下场景描述：这个页面有三个部分组成的.

顶部的头部信息--导航栏--内容

当页面滚动的时候。导航栏始终是固定在最顶部的。

我们使用的第一种方案就是使用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>

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。

使用css 与 js 两种方式实现导航栏吸顶效果的更多相关文章

  1. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  2. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  3. js中获取css样式的两种方式

    1. 对象.style.样式名  弊端就是只能获取行内样式 2.window.getComputedStyle(对象,null); 最好用第二种方式 <!DOCTYPE html> < ...

  4. 日期选择器（Query+bootstrap和js两种方式）

    日期选择是在下拉列表中选择年.月.日,年显示前后的五年,12个月,日就是有30.31.29.28天的区别,随着月份的变而变 一.js方式的日期选择 (1)首先就是三个下拉列表了,点击年.月.日显示列表 ...

  5. CSS&JS两种方式实现手风琴式折叠菜单

    <div class="accordion"> <div id="one" class="section"> < ...

  6. JavaScript判断各浏览器CSS前缀的两种方式

    不管浏览器更新的多快,号称多么支持标准.厂商不同,他们之间还是有很多差异.我们需要区分出这些差异,针对不同的浏览器做不同的处理. 比如 CSS 前缀,IE 的是 "-ms-",旧版 ...

  7. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  8. 获取表单选中的值（利用php和js两种方式）

    php代码中获取表单中单选按钮的值: (单选按钮只能让我们选择一个,这里有一个“checked”属性,这是用来默认选取的,我们每次刷新我们的页面时就默认为这个值.) 例: <form name= ...

  9. javascript实例:两种方式实现tab栏选项卡

    方法1: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  10. 原生js实现导航栏吸顶

    实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶. 话不多说了,代码如下: window.onscroll = function ( ...

随机推荐

  1. 一文详解Java日志框架JUL

    摘要:JUL(Java util logging),Java原生日志框架,不需要引入第三方依赖包,使用简单方便. 本文分享自华为云社区<Java 日志框架 JUL 详解大全>,作者: 陈皮 ...

  2. 华为云开天aPaaS 上线，服务千万开发者，使能行业场景化创新

    摘要:9月25日,华为云在华为全联接2021发布四大生态策略,并宣布2022年投入1亿美元升级沃土云创计划.华为云开天aPaaS正式上线,实现经验即服务,使能行业场景化创新. 本文分享自华为云社区&l ...

  3. 谁说count(*) 性能最差，我需要跟你聊聊

    摘要:当我们对一张数据表中的记录进行统计的时候,习惯都会使用 count 函数来统计,但是 count 函数传入的参数有很多种,比如 count(1).count(*).count(字段) 等.到底哪 ...

  4. 总结MySQL 的一些知识点：MySQL 连接的使用

    MySQL 连接的使用 在前几章节中,我们已经学会了如何在一张表中读取数据,这是相对简单的,但是在真正的应用中经常需要从多个数据表中读取数据. 本章节我们将向大家介绍如何使用 MySQL 的 JOIN ...

  5. Centos7 怎么永久关闭防火墙

    1.连接到centos主机,然后输入命令"systemctl status firewalld.service"并按下回车键. 2.然后在下方可以查看得到 " activ ...

  6. HanLP — HMM隐马尔可夫模型 -- 训练&预测

    BMES => B-begin:词语开始.M-middle:词语中间.E-end:词语结束.S-single:单独成词 训练的过程,就是求三个矩阵的过程 初始概率矩阵 转移概率矩阵 发射矩阵 每 ...

  7. SQL Server 锁表

    select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName from sys.dm_tran ...

  8. Appium介绍及第一个例子

    Appium介绍 appium是开源的移动端自动化测试框架 appium可以测试原生的,混合的,以及移动端的项目 appium可以测试ios,android应用 appium是跨平台的,可以用在osx ...

  9. PS 新建作业DUMP DBSQL_DUPLICATE_KEY_ERROR

    1.CJ20N新建作业 在CJ20N中新建作业后,保存DUMP,报以下错误 2.相关NOTE 605584 - CN22: update termination when creating activ ...

  10. 【计算机网络】JWT token、Session

    JWT token https://www.bilibili.com/video/BV1VM4y117qr/?spm_id_from=333.999.0.0&vd_source=d112766 ...