cssjs两种⽅式实现导航吸顶效果
导航吸顶效果是前端开发中常⽤的需求，通常⽅法时监听页⾯滚动，当滚动距离⼤于导航距离⽗元素的距离时就设置导航固定定位。
此时需要注意的是，当给导航设置固定定位后会脱离标准流，下⾯的内容就会顶上去原来的位置，因此需要有⼀个元素占位，这样滚
动距离不⼤时不会导致内容被遮盖的现象。另外还有⼀种纯CSS的实现⽅式，则很少为⼈知晓。且听我慢慢道来。
⽅式⼀：使⽤JS监听滚动的⽅式实现
结构
<body>
<div class="header">头部信息栏</div>
<div class="navbar" id="navbar">中部导航栏</div>
<!-- 占位 -->
<div class="position hide" id="position"></div>
<div class="content">
内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内  </div>
</body>
样式
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;
}
/
js导航栏下拉菜单* ⽅式⼆：使⽤属性选择器
.navbar[data-fixed="fixed"] {
position: fixed;
top: 0;
left: 0;
}
*/
.hide{
display: none
}
逻辑
var navbar = ElementById('navbar')
var position = ElementById('position')
var navbarTop = navbar.offsetTop; // 获取导航栏到⽗元素的顶部距离
// 监听滚动
// 获取滚动的距离
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop ;  /*⽅式⼀：动态绑定类*/
// 滚动⾼度>元素距离顶部的位置时添加类，否则移除类
scrollTop > navbarTop ? navbar.classList.add('fixed') : ve('fixed')
// 控制占位内容是否显⽰
scrollTop > navbarTop ? ve('hide') : position.classList.add('hide')
/* ⽅式⼆：动态绑定属性
navbar.setAttribute('data-fixed', scrollTop > navbarTop ? 'fixed' : '');
*/
}
⽅式⼆：使⽤纯CSS的⽅式实现
注意：该⽅式存在兼容性问题，请谨慎使⽤，注意兼任。
结构
<body>
<div class="header">头部信息栏</div>
<div class="navbar" id="navbar">中部导航栏</div>
<div class="content">
内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内内  </div>
</body>
样式
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: sticky;
left: 0;
top: 0;
z-index: 99
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。