作者:A布匹rray | 来源:互联网 | 2023-09-04 16:46
通讯录式的吸顶结果,当前bar牢固在顶部要领一:js监听onscroll事宜完成道理吸顶的谁人bar实际上是一个定位在屏幕最上的一个元素,把下面各个区块的高度累加放到一个数组里[0
通讯录式的吸顶结果,当前bar牢固在顶部
要领一: js 监听 onscroll 事宜
- 吸顶的谁人 bar 实际上是一个定位在屏幕最上的一个元素,把下面 各个区块的高度累加放到一个数组里
[0, 740, 990, 1310, ...]
- 拿当前转动体滚过的距拜别上面的数组里找
对应的区间
,然后将 bar
的笔墨添补进去 - 拿地点区间的
上限值 - 转动值 = 偏移量
var fixedTop = (diff > 0 && diff <40) ? diff - 40 : 0
- 依据上面 fixedTop 设置偏移量
fixedDom.style.transform =
translate3d(0, ${fixedTop}px, 0)
猎取转动体滚过的间隔 参考链接
const el = document.scrollingElement || document.documentElement
const top = el.scrollTop
- 在混淆形式下,由于一切浏览器均运用 document.body.scrollTop 猎取页面的垂直转动条的位置,所以不会涌现兼容性题目。
而在规范形式下,由于 Chrome 与 Safari 依然运用 document.body.scrollTop,而关于 document.documentElement.scrollTop 返回为 0。 - 趁便再说说 document.scrollingElement 这个属性。多是浏览器厂商们也以为如今的页面转动元素太乱,一会儿 BODY 一会儿 HTML,跟页面形式有关,还跟 Webkit 的遗留 BUG 有关,因而搞出来这么个东西。依据 MDN 的引见:
- Document 的 scrollingElement 是一个只读属性,一直指向页面转动元素
各个区块的高度盘算 参考文章
var listGroup = $cls('.list-group-item')
let height = 0
this.listHeight.push(height)
listGroup.forEach(item => {
height += item.clientHeight
this.listHeight.push(height)
})
clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop 的区分
-
clientHeight和offsetHeight
属性和元素的转动、位置没有关系它代表元素的高度,个中:
clientHeight:包含padding但不包含border、程度转动条、margin的元素的高度。关于inline的元素这个属性一直是0,单元px,只读元素。
offsetHeight:包含padding、border、程度转动条,但不包含margin的元素的高度。关于inline的元素这个属性一直是0,单元px,只读元素。
-
scrollHeight
scrollHeight
: 由于子元素比父元素高,父元素不想被子元素撑的一样高就显现出了转动条,
在转动的过程当中本元素有部份被隐蔽了,scrollHeight代表包含当前不可见部份的元素的高度。而可见部份的高度实在就是clientHeight,也就是scrollHeight>=clientHeight恒建立。
在有转动条时议论scrollHeight才有意义,在没有转动条时scrollHeight==clientHeight恒建立。单元px,只读元素
-
scrollTop
: 代表在有转动条时,转动条向下转动的间隔也就是元素顶部被遮住部份的高度。在没有转动条时scrollTop==0恒建立。单元px,可读可设置。 -
offsetTop
: 当前元素顶部间隔近来父元素顶部的间隔,和有无转动条没有关系。单元px,只读元素。
2019-07-09 更新
要领二:position: sticky
sticky: 粘性规划,基本上,能够看做是 position: relative 和 position: fixed 的结合体 ——当元素在屏幕内,表现为 relative ,就要滚出显现器屏幕的时刻,表现为 fixed
对元素设置:
position: -webkit-sticky;
position: sticky;
top: 0; // 摆布也能够设置 left
// 将上述代码改成 以下即可,注重其先人元素不可有 overflow: visible 之外的元素
.list-group-title {
postion: sticky;
top: 0;
}
注重事项:
- 父级元素不能有任何 overflow: visible 之外的设置,不然就没有粘滞结果
- 父级元素不能设置牢固的 hight 高度值
- 同一个父容器中的 sticky 元素,假如定位值雷同,则会堆叠;假如属于不同父元素,则会鸠占鹊巢,挤开本来的元素,顺次构成占位结果。(吸顶结果)
- sticky 定位,不仅能够设置 top,基于 转动容器上边缘定位;还能够设置bottom,left,right
- sticky 参考张鑫旭大佬的文章 sticky