说明
在现今很多公司的官网上,都可以看到导航栏吸顶这一功能,今天向初学者介绍两种方法实现
第一种
运用html中的position
属性实现
position
属性常用的属性值有相对定位relative
,默认值static
,绝对定位absolute
,固定定位fixed
。还有就是一会要用放到的sticky
——粘性定位。
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。
在 viewport 视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。之后,元素将固定在与顶部距离 10px 的位置,直到 viewport 视口回滚到阈值以下。
粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时,始终处于 A 的下方。而在开始滚动 B 部分时,B 的头部会固定在屏幕顶部,直到所有 B 的项均完成滚动后,才被 C 的头部替代。
须指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同
但是,由于sticky
属性是h5中新增的属性,有些老版本浏览器并不能兼容所以要调整兼容性,比较麻烦
第二种
用原生JS实现
首先
先使用js中获取进度条位置的属性scrollTop
,她的兼容写法为
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
运用逻辑短路的方法,当 || 前面的属性不能拿到正确的值时,那么就用 || 后面的属性获取值
而后
调用窗口滚动对象window.onscroll
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
}
建立判断条件,如果页面滚动的值超过导航栏的高度navHeight
时,将导航栏的position
属性值改为fixed
,top
值可以设置为0px,由于导航栏position
属性值的改变会推脱离文档流,所以将下面的内容块的margin-top
值改成导航栏的高度height
if (scrollTop >= 90) {
sBox.style.position = 'fixed';//sBox是导航栏
sBox.style.top = '0px';
tBox.style.margin = '110px,0,0'//tBox是内容块
}
补充
当页面回到顶端时,需要再次显示为原来默认的状态,所以把导航栏的position
值改为默认的static
,内容块的margin
值也要还原
else {
sBox.style.position = 'static';
tBox.style.margin = '0';
}
完整代码如下
<div id="first"></div>
<div id="second"></div>
<div id="third">
<span></span>
</div>
* {
padding: 0;
margin: 0;
}
div:nth-child(1) {
width: 100%;
height: 80px;
background: pink;
}
div:nth-child(2) {
width: 100%;
height: 100px;
background: powderblue;
}
div:nth-child(3) {
width: 100%;
height: 1300px;
background: plum;
}
span {
display: block;
width: 200px;
height: 1000px;
margin: 0 auto;
background: orange;
}
var fBox = document.getElementById('first'),
sBox = document.getElementById('second'),
tBox = document.getElementById('third');
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop >= 90) {
sBox.style.position = 'fixed';
sBox.style.top = '0px';
tBox.style.margin = '110px,0,0'
}
else {
sBox.style.position = 'static';
tBox.style.margin = '0'
}
}