滚动中 hold 住导航，页面不抖动的解决方案

发表于

A(Logo, Name, Keys, Description)

B(Nav, menu)

C(Main, Content)

一个页面被分为 A, B, C 三个部分。当用户开始滚动时，A 被 B 慢慢遮住，滚到 B 或者 C 时，B 需要一直位于浏览器顶部。

一般解决方案：

A：position: fixed

B: margin-top: A.height

滚动事件

1
2
3
4
5
if (scrollTop > A.height) {
     B: position: fixed
} else {
     B: position: initial
}

所产生的问题：

当 B fixed 后，页面高度由 A + B + C 变为 A + C，导致 C 自动上移了 B.height，从而使 scrollTop 变小。这样根据滚动事件将执行 B: position: initial，用鼠标慢慢拖动时，B 会进行多次抖动（fixed->initial->fixed->initial->……）。

解决方案：

使 B fixed 后，页面高度依旧为 A + B + C。

B: margin-top: A.height

B-wrap： height: B.height

为了使用户产生 B fixed 后的视觉动感，可设置 scrollTop > A.height + B.height / 3

参考页面 http://liuyun.io/