關于元素定位 —— 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
