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
滚动事件
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/
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于