🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

滚动中 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

滚动事件

    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/


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步