【Web前端实操18】粘性定位——即固定顶层内容，可以继续滚动，但是顶层内容固定，不随着一起滚动

粘性定位

1、了解

        可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。粘性定位是指网页或移动应用程序中的一种特性，即当用户滚动页面时，某个元素能够保持在屏幕上特定位置不动，直到用户滚动到达一定位置或进行特定操作。这个特性可以用于吸引用户的注意力或提供更方便的操作。

        通常，粘性定位可以实现在顶部导航栏或底部菜单栏，使用户可以在浏览页面的同时随时访问导航或菜单选项。这样，无论用户滚动到页面的哪个部分，导航或菜单都会始终可见。

粘性定位还可以用于显示重要的提示、广告或其他信息。通过将这些元素固定在屏幕上的特定位置，可以确保用户在浏览页面时不会错过这些重要的内容。

        总之，粘性定位可以提高网页或移动应用程序的用户体验，使用户更方便地访问导航或菜单选项，并确保重要信息始终可见。

        大家可以在翻看一些网页页面的时候，看到搜索栏那一块内容，在当前页面不动的时候，它是固定的，也不变动，这个时候是相对定位。

但是往下滚动的时候，内容随之变化，但是搜索栏这一块内容会固定在顶部，又变换成固定定位。

        本次博文主要实现的就是粘性定位，介于两种定位之间的定位。

2、粘性定位为什么不生效？

        粘性定位并不是万能的，有时候碰上一些状况就会失效，以下是失效的原因：

• 父元素不能有overflow:hidden或者overflow:auto属性；
• 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位；
• 父元素的高度不能低于 sticky 的高度；