场景描述

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

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

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

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

    摘要:操作系统就是管家,电脑的设备就是资源,如果进程先要操作资源,必须要进行系统调用,有操作系统去处理,然后再返回给进程,这样的代理模式是不是很常见?因此app 就是你写的程序,资源就是硬盘或者其他的 ...

  2. 云图说｜分布式事务管理DTM：“买买买”背后的小帮手

    摘要:分布式事务管理DTM通过提供高性能.高可靠.低侵入等核心价值,可以更好的帮助企业应对微服务场景带来的一致性问题. 本文分享自华为云社区<[云图说]第224期 分布式事务管理DTM,&quo ...

  3. 从 Uber 数据泄露事件我们可以学到什么？

    Uber 数据泄露始于一名黑客从暗网市场购买属于一名 Uber 员工的被盗凭证.最初尝试使用这些凭据连接到 Uber 的网络失败,因为该帐户受 MFA 保护.为了克服这一安全障碍,黑客通过 What' ...

  4. 【mongodb】pymongo使用

    pymongo基本使用 import pymongo from bson.objectid import ObjectId # 连接方式1 client = pymongo.MongoClient(h ...

  5. Linux--修改会话超时时间

    控制用户在一段时间内没有活动时会话的自动注销时间 1.修改ssh配置文件(适用于SSH会话) vim /etc/ssh/sshd_config ClientAliveInterval 1800 #秒 ...

  6. Qt 如何配置CLion标准控制台输出？

    CMake 相关问题: 即CMakeLists.txt文件中,在add_executable添加了WIN32.即当使用了WIN32标识后,就去掉了控制台,那么自然就没有信息打印出来了. # for e ...

  7. vue+iviews 动态表格（table组件）

    iviews官网上关于table的使用方法是固定表头的使用方法,如何生成动态的table网上找了好多也没有特别合适的,综合几位博主的文章经过尝试终于实现了,分享出来供大家参考 一.先看官网上的样例 官 ...

  8. 十六、企业级私有仓库harbor

    系列导航 一.docker入门(概念) 二.docker的安装和镜像管理 三.docker容器的常用命令 四.容器的网络访问 五.容器端口转发 六.docker数据卷 七.手动制作docker镜像 八 ...

  9. 从头到尾创建一个vue项目

  10. Cortex M3 CORE

    Cortex CM3 内核架构 CM3内核主要包含几个部分:取指(Fetch)\指令译码(Decoder/DEC)\执行(EXEC)\ALU 内存取数通过load & store指令,就是通过 ...