原創(chuàng)聲明
本文系作者辛苦碼字所得晰筛，歡迎分享和轉(zhuǎn)載，但請在明顯位置注明作者的如下信息：
筆名：來碗雞蛋面
簡書主頁：http://www.reibang.com/u/4876275b5a73
郵箱：job_tom@foxmail.com
CSDN ID：tom_wong666
需求：
實現(xiàn)banner吸頂功能链峭，即nav盹牧，bannner通危，content上下三欄布局頁面上，向上滾動過程中：
1蜈垮，nav會消失逐漸耗跛；
2，banner會逐漸向上移動攒发，直到貼到body頂部然后固定在body頂部调塌；
3,content會向上走并逐漸被隱藏；
分析：
1惠猿，js+css實現(xiàn)：nav static定位羔砾， banner absolute定位(加top等于nav高度)， content static定位(加margin-top 等于banner高度)偶妖，依據(jù)body的scrollTop值動態(tài)調(diào)整banner absolute定位的top值姜凄；這樣做，缺點是邏輯復(fù)雜趾访，設(shè)備資源消耗大态秧，以及頁面容易抖動。
2扼鞋，css實現(xiàn)：position: sticky;可以規(guī)避以上缺點申鱼；缺點是IE不兼容，不過親測Edge是支持的云头，畢竟Edge已經(jīng)擁抱Chromium了捐友。
position: sticky說明--參閱MDN解釋如下：
// 粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位溃槐，之后為固定定位匣砖。例如：
#one { position: sticky; top: 10px; }
// 在 viewport 視口滾動到元素 top 距離小于 10px 之前，元素為相對定位。之后脆粥，元素將固定在與頂部距離 10px 的位置砌溺，直到 viewport 視口回滾到閾值以下。
// 粘性定位常用于定位字母列表的頭部元素变隔。標(biāo)示 B 部分開始的頭部元素在滾動 A 部分時，始終處于 A 的下方蟹倾。而在開始滾動 B 部分時匣缘，B 的頭部會固定在屏幕頂部，直到所有 B 的項均完成滾動后鲜棠，才被 C 的頭部替代肌厨。
須指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效豁陆。否則其行為與相對定位相同柑爸。
代碼示例：
<html lang="zh-en">
<head>
<style>
body {
position: relative;
}
.nav {
width: 100%;
height: 10%;
background: red;
position: sticky;
z-index: 100;
top: 0;
}
.banner {
width: 100%;
height: 10%;
background: blue;
position: sticky;
z-index: 100;
top: 0;
}
.content {
width: 100%;
height: 10%;
background: gray;
position: relative;
z-index: 0;
}
</style>
</head>
<body>
<div class="nav">nav</div>
<div class="banner">banner
<br/>
向上滾動過程中：1，nav會消失逐漸盒音；2表鳍，banner會逐漸向上移動，直到貼到body頂部然后固定在body頂部祥诽；3,content會向上走并逐漸被隱藏譬圣；
</div>
<div class="content">content1</div>
<div class="content">content2</div>
<div class="content">content3</div>
<div class="content">content4</div>
<div class="content">content5</div>
<div class="content">content6</div>
<div class="content">content7</div>
<div class="content">content8</div>
<div class="content">content9</div>
<div class="content">content10</div>
<div class="content">content11</div>
<div class="content">content12</div>
</body>
</html>
