使用css 与 js 两种方式实现导航栏吸顶效果
场景描述
简单的说一下场景描述：这个页面有三个部分组成的.
顶部的头部信息--导航栏--内容
当页面滚动的时候。导航栏始终是固定在最顶部的。
我们使用的第一种方案就是使用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 两种方式实现导航栏吸顶效果的更多相关文章
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- 【javascript】原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- js中获取css样式的两种方式
1. 对象.style.样式名 弊端就是只能获取行内样式 2.window.getComputedStyle(对象,null); 最好用第二种方式 <!DOCTYPE html> < ...
- 日期选择器（Query+bootstrap和js两种方式）
日期选择是在下拉列表中选择年.月.日,年显示前后的五年,12个月,日就是有30.31.29.28天的区别,随着月份的变而变 一.js方式的日期选择 (1)首先就是三个下拉列表了,点击年.月.日显示列表 ...
- CSS&JS两种方式实现手风琴式折叠菜单
<div class="accordion"> <div id="one" class="section"> < ...
- JavaScript判断各浏览器CSS前缀的两种方式
不管浏览器更新的多快,号称多么支持标准.厂商不同,他们之间还是有很多差异.我们需要区分出这些差异,针对不同的浏览器做不同的处理. 比如 CSS 前缀,IE 的是 "-ms-",旧版 ...
- CSS和JS两种颜色渐变文字效果代码
js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...
- 获取表单选中的值（利用php和js两种方式）
php代码中获取表单中单选按钮的值: (单选按钮只能让我们选择一个,这里有一个“checked”属性,这是用来默认选取的,我们每次刷新我们的页面时就默认为这个值.) 例: <form name= ...
- javascript实例:两种方式实现tab栏选项卡
方法1: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- 原生js实现导航栏吸顶
实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶. 话不多说了,代码如下: window.onscroll = function ( ...
随机推荐
- 跟我学AI建模：分子动力学仿真模拟之DeepMD-kit框架
摘要:分子动力学仿真模拟的重点就在于如何建立模型描述分子间的相互作用. 本文分享自华为云社区<AI建模-分子动力学仿真>,作者: 木子_007 . 一.背景 分子动力学的仿真模拟广泛应用于 ...
- 鲲鹏基础软件开发赛道openLooKeng赛题火热报名中，数十万大奖等您来收割
随着云计算.物联网.移动计算.智慧城市.人工智能等领域的发展,各类应用对大数据处理的需求也发生着变化.以实时分析.离线分析.交互式分析等为代表的计算引擎逐渐为各大企业行业发展所看重.作为鲲鹏产业生态的 ...
- 想从单体架构演进到分布式架构，SBA 会是一个不错的选择
摘要:SBA 可以看成是单体架构和微服务架构之间的一个折中方案,它也是按照业务领域进行服务划分,但服务划分的粒度相比微服务要更粗.从单体架构演进到 SBA,会比直接演进到微服务架构更加容易. 本文分享 ...
- Mac 常用软件、快捷健、常用操作 和 Windows 对比
常用快捷健 Mac Windows 说明 活动监视器 任务管理器 制作替身 创建快捷方式 Command + I 右击属性 显示简介 Command + Option + I 开启信息检查器 + 鼠标 ...
- PPT 常规设置
高级设置 可以将撤销次数调大,最多 150次 默认拉到PPT中的图片是被压缩的,可以设置成不压缩(解压 PPT 可查看里面的图片大小) 字体嵌入 可将自动保存时间调短,默认保存目录我习惯先保存到桌面( ...
- 【HZERO】安全体系
安全体系 https://open.hand-china.com/community/detail/521336056218521600#前言前言open&doc-0
- 【调试】perf和火焰图
简介 perf是linux上的性能分析工具,perf可以对event进行统计得到event的发生次数,或者对event进行采样,得到每次event发生时的相关数据(cpu.进程id.运行栈等),利用这 ...
- SpringMVC的特性及应用
Spring MVC特点 清晰地角色划分 灵活的配置功能 提供了大量的控制器接口和实现类 真正的View层实现无关(JSP.Velocity.Xslt等) 国际化支持 面向接口编程 Spring提供了 ...
- Canvas实现画布的缩放
主要介绍三种方式: 首先创建一个index.html文件 <!DOCTYPE html> <html lang="en"> <head> < ...
- P2058
这道不难的题引发了我不少思考 我第一个版本是用vector嵌套vector写成的,后来发现没必要还存储那些已经超过24h的船,完全可以删除前面的船,因此把外层vector换成了deque. 即用deq ...