关于元素定位 —— getBoundingClientRect
这是一个很老的方法，从 IE 4 开始就有了。我们用它获取元素在视口区域的具体位置。它返回一个 DOMRect 对象（在 IE 中返回 ClientRect 对象），包含了元素距视口上、下、左、右的距离信息。详见 API 文档。
API Doc: Element.getBoundingClientRect()
关于元素大小
在实现页面布局变化时，我们需要动态计算一些数据，比如边距、大小等。JavaScript 提供了许多有关元素大小的属性，正确使用它们才能得到真正需要的数据。
JavaScript DOM 关于“元素大小”的一些属性
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
