固定定位+渐隐渐现

1. 前言

相信大家也会在手机上见过类似这样的效果：

注意看布局，眼球不要被那个 45-70K 的薪资吸引了哈！
这是某著名招聘网站的页面，如果屏幕前的你正在用这款软件的话，希望你也能找到这么高工资的工作。

当然咱们主要还是来讲布局，注意看上面那栏内的文字是不是随着页面的滚动而有一个渐隐渐现的效果啊。

这样的话不但会在刚进入页面时显得更加的整洁，而且更是丰富了交互的趣味性。

2. 实现

这里需要用到一点点的 JS 来获取页面滚动的距离，不会 JS 的同学先不要紧张，看不懂的话可以先记住怎么用：

运行结果：

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

通过我们对移动端的各种网站的观察发现，通常来说下面那栏是不会渐隐渐现的，所以这里下栏一直是固定的。

如果同学们也想给下栏加入一个炫酷的效果，那就赶快来打开编辑器来改造一下这段代码吧！

3. 结语

这一章的上下栏布局和上一章的吕形布局很相似，基本上可以说学会了一个的时候就已经学会了另一个。

不过下一章可就和这一章不那么相似了，因为下一章是每天刷微博逛朋友圈所经常看到的： 九! 宫! 格!