问题大集05-如何实现一个tab栏的动态固定

1、问题

        如何实现一个tab栏的动态固定

2、解决思路

使用 粘性定位：

（1）  position: sticky;（设置定位方式）

（2）top：0（设置阙值）（当元素滚动到其父元素的特定阈值（如top: 0）时，它会固定在那个位置，直到滚动超出父元素的边界）

3、position: sticky;与position：fixed;中sticky和fixed的区别是什么？

（1）sticky定位：

  1）当页面滚动时，粘性定位的元素会在特定位置“粘滞”。具体来说，当元素滚动到其父元素的特定阈值时，它会固定在那个位置，直到滚动超出父元素的边界

     2）粘性定位的效果依赖于父元素的大小，且仅在其父元素内生效

     3）适合用于创建导航栏、表头等在页面滚动时保持可见的元素。

（2）fixed

        1）固定定位（fixed）使元素相对于浏览器窗口固定，不随页面滚动而移动；无论视口如何滚动，固定定位的元素位置始终不变。

        2）固定定位不依赖于父元素，而是直接相对于视口进行定位。

        3）适合用于创建悬浮菜单、回到顶部按钮等需要始终保持在视口某个位置的元素。

4、示例

        蓝桥杯：6180：动态的Tab栏