通讯录式的吸顶效果

AndroidTraveler 发布于2019-08-23 14:55 / 1885人阅读

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

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

通讯录式的吸顶效果

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

Forelax 2019-08-30 15: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