用 JavaScript 实现对滚动时页面布局变化的控制

关于元素定位 —— getBoundingClientRect

这是一个很老的方法，从 IE 4 开始就有了。我们用它获取元素在视口区域的具体位置。它返回一个 DOMRect 对象（在 IE 中返回 ClientRect 对象），包含了元素距视口上、下、左、右的距离信息。详见 API 文档。

API Doc: Element.getBoundingClientRect()

关于元素大小

在实现页面布局变化时，我们需要动态计算一些数据，比如边距、大小等。JavaScript 提供了许多有关元素大小的属性，正确使用它们才能得到真正需要的数据。

JavaScript DOM 关于“元素大小”的一些属性

先来看一张图（来源：https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively）

offsetWidth 和 offsetHeight

• offsetHeight：元素在垂直方向上占用的空间大小，以像素计。
• offsetWidth：元素在水平方向占用的空间大小。

clientWidth 和 clientHeight

• clientWidth：元素内容区宽度加上左右内边距宽度。
• clientHeight：元素内容区高度加上上下内边距高度。

scrollWidth 和 scrollHeight

• scrollHeight：在没有滚动条的情况下，元素内容的总高度。
• �scrollWidth：在没有滚动条的情况下，元素内容的总宽度。

在后边的实例中，我使用了 clientWidth 来获取整个文档的宽度。

关于 CSS 过渡动画

CSS transition 无法计算 display 属性的过渡动画。CSS transition 本质上是在控制某个属性变化过程的快慢（比如宽度从 0 逐渐加快（ease-in）的变成 100 PX），所以实际上即便支持 display 也没办法控制其变化。transition 虽然支持 visibility 属性，但是也没有合适的方案控制变化。

通常情况下，我们通过为 opacity 添加过渡动画实现元素的淡入淡出（ Visibility 是为了占位 & 阻止用户在 ul 上进行某些误操作）：

div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

具体实现

Code: https://github.com/lcx960324/scroll-fixed-demo

固定导航栏（固钉效果）

https://lcx960324.github.io/scroll-fixed-demo/Fixed%20Navigator/

Demo

简略 / 标准元素切换（类似 Github 个人主页滚动时的变化效果）

https://lcx960324.github.io/scroll-fixed-demo/Element%20Switch/

Aug-19-2017 21-06-03.gif