让代码简单起来:有那么个属性,就是那么神奇

71 阅读1分钟

前言:最近换了个项目组,开始写uni-app了,为什么选它呢,老大定的,我们这些小兵有啥发言权呢咳咳,正经点。嗯,其实是项目需求决定的开发选型,这个项目成品要app(ios/android)还要小程序,uni-app就可以开发一次多端覆盖,但开发过程还是有点头秃的,盖阴UI的想法,毕竟内置的组件是真的少,今天就先来实现一个一般APP开发首页百分要实现的效果。 上滑区域固定,一直吸顶,效果如下

// 使用
position: sticky;
top: 0;

详解

粘性定位-position: sticky;

粘性定位的元素是依赖于用户的滚动,在 position:relative与 position:fixed定位之间切换。

它的行为就像position:relative;而当页面滚动超出目标区域时,它的表现就像position:fixed;,它会固定在目标位置。

relative 定位

相对定位元素的定位是相对其正常位置,移动相对定位元素,但它原本所占的空间不会改变。

fixed 定位

元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。

  • 注意:元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。