导航栏吸顶功能实现的两种方法

说明

在现今很多公司的官网上，都可以看到导航栏吸顶这一功能，今天向初学者介绍两种方法实现

第一种

运用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'
    }
}