如何让tab滑动到顶端置顶

之前做项目的时候遇到一个需求:
tab切换栏滑动到顶端的时候置顶不动,当再次下滑的时候恢复原状。
当时为了做这个功能,还特意去监听了浏览器的滚动,当滚动到特定位置的时候,让隐藏的置顶的tab(和标准文档流里的tab内容一样)显示。
现在发现了一个css属性可以快速实现这个功能,那就是:position:sticky;

粘性(sticky)定位可以被认为是相对定位(relative)和固定定位(fixed)的混合。
元素在跨越特定阈值前为相对定位,之后为固定定位。
须指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效,否则其行为与相对定位相同。
简单点说就是:
当元素在屏幕内,表现为relative,就要滚出显示器屏幕的时候,表现为fixed。

position:sticky;的效果受制于父级元素们,有如下特性:
1.父级元素不能有任何overflow:visible以外的overflow设置,否则失去粘滞效果;
2.父级元素也不能设置固定的height高度,否则也失去粘滞效果;
3.同一个父容器中的sticky元素,如果定位值相同会重叠在一起;如果属于不同父容器,则会挤开原来的元素,形成依次占位的效果;
4.sticky定位,不仅可以设置top,还可以设置bottom、left和right值。

遗憾的是IE不支持这个css属性,所以需要兼容ie的同学只能放弃它了。而Safari目前还需要-webkit-私有前缀。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值