本贴最后更新于 334 天前,其中的信息可能已经时移俗易

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/

  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:PipeSoloSymWide 等,欢迎大家加入,贡献开源。

    3309 引用 • 3947 回帖 • 654 关注
  • demo
    4 引用 • 7 回帖
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    70 引用 • 292 回帖
感谢    关注    收藏    赞同    反对    举报    分享