uni-app 滑到一定位置固定某个元素在顶部 吸顶实例
APP端吸顶
完美吸顶方案
uView uniapp组件库
//通过offset-top参数设置组件在吸顶时与顶部的距离
<u-sticky offset-top="200">
<view>
吸顶内容
</view>
</u-sticky>
<view>
不需要吸顶内容
</view>
Vant Vue 组件库
//通过 offset-top 属性可以设置组件在吸顶时与顶部的距离。
<van-sticky :offset-top="50">
<van-button type="info">吸顶距离</van-button>
</van-sticky>
直接使用
<template>
<view class="content">
<view style="width: 100%; height: 200rpx; border: red solid 1rpx;">导航栏上面内容</view>
<view class="switchSign"></view>
<view class="tagTop" :class="{ 'topfixed-active': topfixed == 1 }">
<view class="">导航栏</view>
</view>
<view class="wrap" :class="{ paTop80: topfixed == 1 }">
<view class="" style="border: solid #007AFF 1rpx; width: 100%; height: 600rpx; text-align: center;">导航栏下面内容</view>
<view class="" style="border: solid #007AFF 1rpx; width: 100%; height: 600rpx; text-align: center;">导航栏下面内容</view>
<view class="" style="border: solid #007AFF 1rpx; width: 100%; height: 600rpx; text-align: center;">导航栏下面内容</view>
<view class="" style="border: solid #007AFF 1rpx; width: 100%; height: 600rpx; text-align: center;">导航栏下面内容</view>
<view class="" style="border: solid #007AFF 1rpx; width: 100%; height: 600rpx; text-align: center;">导航栏下面内容</view>
<view class="" style="border: solid #007AFF 1rpx; width: 100%; height: 600rpx; text-align: center;">导航栏下面内容</view>
<view class="" style="border: solid #007AFF 1rpx; width: 100%; height: 600rpx; text-align: center;">导航栏下面内容</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
topfixed: 0
};
},
onPageScroll(res) {
var _this = this;
var temptop;
//uni.createSelectorQuery()返回一个 SelectorQuery 对象实例。
//可以在这个实例上使用 select 等方法选择节点,
const query = uni.createSelectorQuery();
//select在当前页面下选择第一个匹配选择器的节点,
//boundingClientRect添加节点的布局位置的查询请求。其功能类似于 DOM 的 getBoundingClientRect。
query.select('.switchSign').boundingClientRect();
//selectViewport选择显示区域,可用于获取显示区域的尺寸、滚动位置等信息
//scrollOffset添加节点的滚动位置查询请求。
query.selectViewport().scrollOffset();
//exec执行所有的请求。请求结果按请求次序构成数组,在callback的第一个参数中返回。
query.exec(function(res) {
// console.log(res);
res[0].top; // .switchSign节点距离上边界的坐标
res[1].scrollTop; // 显示区域的竖直滚动位置
temptop = res[0].top;
if (temptop <= '2') {
console.log(_this.topfixed);
_this.topfixed = 1;
} else {
console.log(_this.topfixed);
_this.topfixed = 0;
}
});
}
};
</script>
<style>
.topfixed-active {
width: 100%;
padding: 0 25upx;
position: fixed;
top: var(--window-top);/* 顶部导航栏位置 */
/* top: calc(9.3vh + var(--window-top)); *//* 顶部导航栏还有其他盒子 使用 */
left: 0;
background: #fff;
z-index: 9;
box-sizing: border-box;
}
.tagTop {
height: 80upx;
line-height: 80upx;
background-color: #eeeeee;
text-align: center;
}
.paTop80 {
padding-top: 80upx;
}
</style>
直接使用
<template>
<view class="full">
<view class="full">
<image src="/static/shuijiao.jpg" style="width: 750upx;height: 200px;"></image><!-- 注意这里图片的高度,必须是偶数。否则在H5端的部分chrome版本上会触发chrome的bug,在标题栏下方会留下一条线的空隙 -->
</view>
<view class="sticky-box">
<view style="width: 250upx;text-align: center;"><text class="textcenter">条件1</text></view>
<view style="width: 250upx;text-align: center;"><text class="textcenter">条件2</text></view>
<view style="width: 250upx;text-align: center;"><text class="textcenter">条件3</text></view>
</view>
<view>
<text style="line-height: 90px;" class="textcenter">
1
2
3
4
5
6
7
8
9
10
</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.full{
width: 750upx;
margin: 0;
padding: 0;
}
.sticky-box {
/* #ifndef APP-PLUS-NVUE */
display: flex;
position: -webkit-sticky;
/* #endif */
position: sticky;
top: var(--window-top);
z-index: 99;
flex-direction: row;
margin: 0px;
padding: 15px 0 15px 0;
background-color: #F4F5F6;
border-bottom-style: solid;
border-bottom-color: #E2E2E2;
}
.textcenter{
text-align: center;
font-size: 18px;
}
</style>
H5端吸顶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style>
.showdiv {
width: 100%;
height: 1200px;
background-color: #666666;
margin: 0px auto;
}
.headdiv {
width: 100%;
height: 50px;
position: sticky;
top: 0px;
background-color: #2aabd2;
margin: auto 0;
}
.main {
position: relative;
width: 100%;
}
.headtop {
width: 100%;
height: 50px;
background-color: aqua;
}
</style>
<body>
<div class="main">
<div class="headtop">
</div>
<div class="headdiv">
</div>
<div class="showdiv">
<form method="post" enctype="multipart/form-data">
<div>
<label for="image_uploads">Choose images to upload (PNG, JPG)</label>
<input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .pdf, .png" multiple>
</div>
<div class="preview">
<p>No files currently selected for upload</p>
</div>
<div>
<button>Submit</button>
</div>
</form>
</div>
</div>
</body>
</html>