原创声明
本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666
需求：
实现banner吸顶功能，即nav，bannner，content上下三栏布局页面上，向上滚动过程中：
1，nav会消失逐渐；
2，banner会逐渐向上移动，直到贴到body顶部然后固定在body顶部；
3,content会向上走并逐渐被隐藏；
分析：
1，js+css实现：nav static定位， banner absolute定位(加top等于nav高度)， content static定位(加margin-top 等于banner高度)，依据body的scrollTop值动态调整banner absolute定位的top值；这样做，缺点是逻辑复杂，设备资源消耗大，以及页面容易抖动。
2，css实现：position: sticky;可以规避以上缺点；缺点是IE不兼容，不过亲测Edge是支持的，毕竟Edge已经拥抱Chromium了。
position: sticky说明--参阅MDN解释如下：
// 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：
#one { position: sticky; top: 10px; }
// 在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。
// 粘性定位常用于定位字母列表的头部元素。标示 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>
网友评论