场景描述

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

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

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

我们使用的第一种方案就是使用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. 游戏“外挂”？—— AI生成游戏最强攻略

    作为一名快乐的肥宅,玩游戏是居家必备,无论是王者荣耀.吃鸡.原神这些大热游戏,还是跳一跳.合成大西瓜.2048.这些风靡一时得小游戏,咱都有涉及.但是为了成为一个"头号玩家",我总 ...

  2. Koa、koa-router、koa-jwt 鉴权详解：分模块鉴权实践总结

    首先看koa-router koa-router use 熟悉Koa的同学都知道use是用来注册中间件的方法,相比较Koa中的全局中间件,koa-router的中间件则是路由级别的. koa-rout ...

  3. Vue 多环境配置

    没有使用 package.json 进行配置 ,改配置时不需要重新打包 Vue 多环境配置 package.json settings.js window.environment="dev& ...

  4. Tomcat--安装&&配置文件

    配置信息 centos:7.8 tomcat:7.0.3 jdk:1.8 1 部署java环境 [root@localhost ~]# tar xvf jdk-8u181-linux-x64.tar. ...

  5. VS2019 快速实现 C# 连接 MySQL 数据库并实现基本操作代码

    一.工具: Visual Studio 2019 MySQL 数据库 二.添加动态链接: Visual Studio 中选择项目-> 管理NuGet程序包(N) -> 然后在浏览里面搜索 ...

  6. ACM：快读读入技巧

    快速读入:当数据输入较大时,比scanf快 inline int read(){ int s=0,w=1; char ch=getchar(); while(ch<'0'||ch>'9') ...

  7. 图解 Promise 实现原理（二）—— Promise 链式调用

    本文首发于 vivo互联网技术 微信公众号 链接: https://mp.weixin.qq.com/s/Xz2bGaLxVL4xw1M2hb2nJQ作者:Morrain 很多同学在学习 Promis ...

  8. Nginx 代理后，打开新窗口，报404，开发环境下没有问题

    解决办法: router/index.js文件中, 将 router 的 mode 属性设置为 hash,不要使用 history

  9. 《深入理解计算机系统》（CSAPP）读书笔记 —— 第六章 存储器层次结构

      在计算机系统模型中,CPU执行指令,而存储器系统为CPU存放指令和数据.实际上,存储器系统是一个具有不同容量.成本和访问时间的存储设备的层次结构.   如果你的程序需要的数据是存储在CPU寄存器中 ...

  10. 【vue基础篇】一看就懂的vue环境变量配置

    相关播客地址: https://juejin.cn/post/6844903859878363149 https://juejin.cn/post/6844903682178285575 视频学习资料 ...