固定定位+渐隐渐现

1. 前言

相信大家日常用手机的时候会见过这种页面：

这个需求也比较常见，而且这个交互效果看起来会更加的友好，不过需要用到一点点的 JS 来获取页面滚动的距离，不会 JS 的同学先不要紧张，看不懂的话可以先记住怎么用就行。

2. 实例代码

运行结果：

为了能让大家清晰的看到滑动效果，这个案例使用了 chinese-gradient 来做背景渐变色。

这里就不用再给主盒子加上边距啦，因为在最上面的时候上栏是透明的，不会覆盖住内容的。

3. 结语

怎么样，是不是很炫酷呢？不过可惜无法用 CSS 来判断屏幕滑动了多少距离，所以渐隐渐现的效果用到了一点点的 JS。