css3中粘性定位

曼妙佳人

前言
项目中，往往会遇到类似这样的需求：网页的导航栏一开始距离浏览器顶部100px，当页面向上滑动后，导航栏跟随页面向上滑动，页面滑动了100px时，导航栏则固定到页面的顶部，脱离文档流。这种情况，我们往往会想到使用position：fixed以及配合js监听页面顶部距离浏览器顶部的距离，而实际上有个比较方便的css样式可以很快的满足此需求：position：sticky。
简介
position: sticky; 粘性定位，基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

position：sticky是相对包含position样式的祖先定位的，而position：fixed是相对于浏览器窗口定位的。




此属性在部分安卓手机滑动会出现轻微抖动情况，所以得根据情况做适当的兼容处理，处理方式使用fixed，但是位置又不是固定的，而是滑动到具体位置才触发

<view :class="isTop?'isTop':''" id="newtop">
我是滚动到指定位置，悬浮在窗口上的元素
</view>

在data里面定义两个参数
topNums //元素距离顶部的位置
isTop=false //通过控制

1. const query = uni.createSelectorQuery().in(this);
   
2.     query.select('#newtop').boundingClientRect(data => {
   
3.            console.log("得到布局位置信息" + JSON.stringify(data));
   
4.            console.log("节点离页面顶部的距离为" + data.top);
   
5.            this.topNums = data.top;
   
6. }).exec();

复制代码

通过uniapp 提供的滚动方式

1. onPageScroll(e) {
   
2. if (e.scrollTop >= topNums ) {
   
3.        this.isTop = true;
   
4.     } else {
   
5.         this.isTop = false;
   
6.     }

复制代码

样式

1. &.isTop {
   
2.       position: fixed;
   
3.       top: 0;
   
4.       width: 100%;
   
5. }

复制代码