用 JavaScript 实现对滚动时页面布局变化的控制

关于元素定位 —— getBoundingClientRect

这是一个很老的方法,从 IE 4 开始就有了。我们用它获取元素在视口区域的具体位置。它返回一个 DOMRect 对象(在 IE 中返回 ClientRect 对象),包含了元素距视口上、下、左、右的距离信息。详见 API 文档。

API Doc: Element.getBoundingClientRect()

关于元素大小

在实现页面布局变化时,我们需要动态计算一些数据,比如边距、大小等。JavaScript 提供了许多有关元素大小的属性,正确使用它们才能得到真正需要的数据。

JavaScript DOM 关于“元素大小”的一些属性

先来看一张图(来源:https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively

offsetWidthoffsetHeight

  • offsetHeight:元素在垂直方向上占用的空间大小,以像素计。
  • offsetWidth:元素在水平方向占用的空间大小。

clientWidthclientHeight

  • clientWidth:元素内容区宽度加上左右内边距宽度。
  • clientHeight:元素内容区高度加上上下内边距高度。

scrollWidthscrollHeight

  • 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

推荐阅读更多精彩内容