上下栏布局简介

除了上面几种方式实现上下栏布局外，为了 增加 交互 效果 ，我们还可能会把上下栏布局做成随着屏幕的滑动而渐隐渐现的这么一种效果：

这种 效果 主要是通过了JS来 获取 到屏幕的滚动距离，然后随着距离的 增加 来动态控制透明度， 增加 了交互的趣味性。

4. 实现手段

一方面我们可以利用现有的CSS 中文 库： chinese-layout  来 快速 实现上下栏布局：

中文布局 CSS 库

这种方式不仅利于我们的学习，更加有助于我们的记忆。

然后也会带领大家如何在不依赖于任何外界条件的情况下纯手工实现上下栏布局：

固定定位法    外边距的作用    非固定定位

作为扩展阅读，我们还提供了交互更加充满趣味性的渐隐渐现 效果 ：

固定定位 + 渐隐渐现

不过由于渐隐渐现 效果 必须用 JS 才能 获取 到 当前页面 的滚动距离，所以最后这一小节只作为扩展阅读，防止没有 JS 基础的小伙伴看了懵圈。

5. 小结

上下栏布局可以为 用户 提供更加丰富的操作，通常用于业务需求略复杂的网站。

下一小节我们就来讲讲如何用 代码 去实现 一个 上下栏布局。

查看更多关于上下栏布局简介的详细内容...