资讯专栏INFORMATION COLUMN

通讯录式的吸顶效果

AndroidTraveler / 1830人阅读

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

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

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

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

相关文章

  • 讯录式的吸顶效果

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

    Forelax 评论0 收藏0
  • 纯css实现手机讯录

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

    王晗 评论0 收藏0
  • 纯css实现手机讯录

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

    苏丹 评论0 收藏0
  • 纯css实现手机讯录

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

    leonardofed 评论0 收藏0

发表评论

0条评论

AndroidTraveler

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<