如何让tab滑动到顶端置顶

本文主要是介绍如何让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-私有前缀。

这篇关于如何让tab滑动到顶端置顶的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---