两种方式实现导航吸顶效果
2019-03-01 本文已影响0人
桃花谷主V
导航吸顶效果是前端开发中常用的需求，通常方法时监听页面滚动，当滚动距离大于导航距离父元素的距离时就设置导航固定定位。此时需要注意的是，当给导航设置固定定位后会脱离标准流，下面的内容就会顶上去原来的位置，因此需要有一个元素占位，这样滚动距离不大时不会导致内容被遮盖的现象。另外还有一种纯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;
}
/* 方式二：使用属性选择器
.navbar[data-fixed="fixed"] {
position: fixed;
top: 0;
left: 0;
}
*/
.hide{
display: none
}
- 逻辑
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('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
}
