前言:最近换了个项目组,开始写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 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。