场景描述
简单的说一下场景描述：这个页面有三个部分组成的. 顶部的头部信息--导航栏--内容 当页面滚动的时候。导航栏始终是固定在最顶部的。 我们使用的第一种方案就是使用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。
