场景描述

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

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

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

我们使用的第一种方案就是使用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. 10年经验总结，华为fellow教你如何成为一名优秀的架构师？

    摘要:华为云首席架构师分享成为架构师必备的一些特质和能力. 本文分享自华为云社区<10年经验总结,华为fellow教你如何成为一名优秀的架构师?>,作者: 技术火炬手 . 在<云享人 ...

  2. PNG文件解读(1):PNG/APNG格式的前世今生

    PNG格式的前世今生 png是一种无损压缩的位图片形格式,其设计目的是试图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性.PNG使用从LZ77派生的无损数据压缩算法--LZW专 ...

  3. 网站web服务器个人博客站开通那些端口合适？

    一般网站服务器,只需要开通80 443,(ssh端口默认22,,建议修改) ping命令没有端口,因为ICMP 协议没有到tcp层,仅走ip层,由于IP层协议是一种点对点的协议,而非端对端的协议,它提 ...

  4. 火山引擎DataLeap的Data Catalog系统公有云实践 （上）

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 前言 Data Catalog 通过汇总技术和业务元数据,解决大数据生产者组织梳理数据.数据消费者找数和理解数的业 ...

  5. 【Docker】docker介绍 什么是虚拟化 容器与虚拟机比较 Docker 概念 docker安装

    目录 docker介绍 什么是虚拟化 docker是什么 容器与虚拟机比较 Docker 概念 docker安装 docker介绍 什么是虚拟化 在计算机中,虚拟化(英语:Virtualization ...

  6. WCF 使用动态代理精简代码架构 (WCF动态调用)

    使用Castle.Core.dll实现,核心代码是使用Castle.DynamicProxy.ProxyGenerator类的CreateInterfaceProxyWithoutTarget方法动态 ...

  7. Codeforce 1288C. Two Arrays（DP组合数学，n个数选择m个数，单调不递减个数，排列组合打表N*N）

    https://codeforces.com/problemset/problem/1288/C Examples input 2 2 output 5 input 10 1 output 55 in ...

  8. 《3D编程模式》写书-第4次记录

    大家好,这段时间我完成了"再看设计原则"的初稿,包括了设计基础.单一职责原则.依赖倒置原则.接口隔离原则.合成复用原则.最少知识原则.开闭原则 目前我已经完成了所有的初稿,后面会进 ...

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

  10. C#将汉字转换为拼音

    首先上效果图 方法调用 private void txt_Chinese_TextChanged(object sender, EventArgs e) { txt_PinYIn.Text = //调 ...