通讯录式的吸顶效果

Forelax 发布于2019-08-30 15:55 / 2372人阅读

摘要：在有滚动条时讨论才有意义，在没有滚动条时恒成立。单位，只读元素代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。当前元素顶部距离最近父元素顶部的距离和有没有滚动条没有关系。

通讯录式的吸顶效果，当前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

上栗的吸顶效果可以用 sitcky 实现

// 将上述代码改成 如下即可，注意其祖先元素不可有 overflow: visible 以外的元素
.list-group-title {
    postion: sticky;
    top: 0;
}

注意事项：

父级元素不能有任何 overflow: visible 以外的设置，否则就没有粘滞效果

父级元素不能设置固定的 hight 高度值

同一个父容器中的 sticky 元素，如果定位值相同，则会重叠；如果属于不同父元素，则会鸠占鹊巢，挤开原来的元素，依次形成占位效果。（吸顶效果）

sticky 定位，不仅可以设置 top，基于滚动容器上边缘定位；还可以设置bottom，left，right

sticky 参考张鑫旭大佬的文章 sticky

GPU云服务器云服务器时吸顶粘黏吸顶刀片式的服务器管家式的小区服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117291.html

通讯录式的吸顶效果

摘要：在有滚动条时讨论才有意义，在没有滚动条时恒成立。单位，只读元素代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。当前元素顶部距离最近父元素顶部的距离和有没有滚动条没有关系。通讯录式的吸顶效果，当前bar固定在顶部 showImg(https://segmentfault.com/img/bVbnGoq?w=392&h=696); 方法一： js 监听 onscro...

AndroidTraveler 2019-08-23 14:55 评论0 收藏0
纯css实现手机通讯录

摘要：不过要是一个简单的小项目，没那么多要求的话，纯还是能很好的适用的，性能上绝对要比通过滚动监听强上好多倍，而且引用方便，只要数据生成了就可以直接使用我们经常在手机上看到通讯录列表，这类布局一般有两个显著的效果 showImg(https://segmentfault.com/img/remote/1460000016709371?w=360&h=640); 首字母吸顶快速定位下...

王晗 2019-08-29 16:59 评论0 收藏0
纯css实现手机通讯录

摘要：不过要是一个简单的小项目，没那么多要求的话，纯还是能很好的适用的，性能上绝对要比通过滚动监听强上好多倍，而且引用方便，只要数据生成了就可以直接使用我们经常在手机上看到通讯录列表，这类布局一般有两个显著的效果 showImg(https://segmentfault.com/img/remote/1460000016709371?w=360&h=640); 首字母吸顶快速定位下...

苏丹 2019-08-02 11:44 评论0 收藏0
纯css实现手机通讯录

摘要：不过要是一个简单的小项目，没那么多要求的话，纯还是能很好的适用的，性能上绝对要比通过滚动监听强上好多倍，而且引用方便，只要数据生成了就可以直接使用我们经常在手机上看到通讯录列表，这类布局一般有两个显著的效果 showImg(https://segmentfault.com/img/remote/1460000016709371?w=360&h=640); 首字母吸顶快速定位下...

leonardofed 2019-08-23 12:23 评论0 收藏0