场景描述

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

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

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

我们使用的第一种方案就是使用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. 一文搞定Matplotlib 各个示例丨建议收藏

    摘要:Matplotlib 是 Python 的绘图库. 它可与 NumPy 一起使用 ,Matplotlib也是深度学习的常用绘图库,主要是将训练的成果进行图形化,因为这样更直观,更方便发现训练中的 ...

  2. 带你了解 HBase 数据模型和 HBase 架构

    摘要:HBase 是一个面向列的 NoSQL 数据库. 本文分享自华为云社区<HBase 架构:HBase 数据模型 & HBase 读/写机制>,作者: Donglian Lin ...

  3. ChatGPT带你入门机器学习：逻辑回归模型博客和小红书风格文案一次搞定！

    打脸了 顺手向大家演示一下如何用 ChatGPT 写技术博客吧,其实蛮简单的,特别需要操心的是它会一本正经的胡说八道,还信誓旦旦的.我们要审查它的回答,万不可全信. 为了便于阅读,我把prompt加粗 ...

  4. CentOS7系统上安装升级Vim8

    基本步骤 1.卸载旧版vim yum remove vim* -y 2. 到Vim官方Github仓库下载目前最新的Vim Release版本 git clone https://github.com ...

  5. Codeforces Round #741 (Div. 2) 个人题解 A~D

    比赛链接:Here 1562A. The Miracle and the Sleeper 题意: 给出 \(l,r\) 求出最大化的 \(a\ mod\ b\) (\(l\le b\le b\le a ...

  6. AcWing 第 13 场周赛  补题记录

    比赛链接:Here AcWing 3811. 排列 签到题, 先输出 \(n\) 然后输出 \(1\sim n -1\) 即可 AcWing 3812. 机器人走迷宫 不会什么特别高级的方法 qaq, ...

  7. 三、redis集群搭建

    系列导航 一.redis单例安装(linux) 二.redis主从环境搭建 三.redis集群搭建 四.redis增加密码验证 五.java操作redis 环境:centos7需要的安装包: redi ...

  8. 【译】 双向流传输和ASP.NET Core 3.0上的gRPC简介

    原文相关 原文作者:Eduard Los 原文地址:https://medium.com/@eddyf1xxxer/bi-directional-streaming-and-introduction- ...

  9. vue异步组件

  10. 《IT项目管理知识》出书了，特点：全是干货

    大纲目录,及内容如下.本书属于付费内容