uni-app 滑到一定位置固定某个元素在顶部吸顶解决方案 APP端 H5端

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">12345678910</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>

uni-app 滑到一定位置固定某个元素在顶部吸顶解决方案 APP端 H5端相关推荐

DOM 案例——(美团外卖下拉框菜单、半透明——信息滑入、模态窗口拖拽效果、放大镜效果、滚动条滑到一定位置的固定导航栏、12306购票网站多级联动、斗鱼TV无规则弹幕特效、百度搜索条动态输入下拉瀑布)
目录 1.缓动动画--美团外卖下拉框菜单 2.半透明--信息滑入 3.模态窗口拖拽效果 4.放大镜效果 5.滚动条滑到一定位置的固定导航栏 6.12306购票网站多级联动 7.斗鱼TV无规则弹幕特效 ...
页面滚动到某一位置吸顶_vue监听滚动事件某元素吸顶或固定位置显示详解
本文主要为大家详细介绍了vue实现某元素吸顶或固定位置显示,监听滚动事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 最近写了一个VUE的web app项目,需要实现某个部位 ...
vue监听滚动事件实现某元素吸顶或者固定位置显示
vue监听滚动事件实现某元素吸顶或者固定位置显示最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果.即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示. 1.监听滚动事件 ...
学习日记-ps文字位置固定,但内容可以修改
实现方法: 在每个文字图层组的后面添加一个"空白的固定图层",然后建立连接关系,这样就可以实现,位置固定,但内容可任意修改.
页面滚动到某一位置吸顶_前端吸顶功能，滚动到一定位置时固定到顶部
2019独角兽企业重金招聘Python工程师标准>>> 适用环境:菜单滑动后固定,搜索框的固定 (只做全了功能,没有写完美样式,明白原理,样式可自行调整,为了区分效果,颜色反差比较明 ...
html定位浏览器兼容,IE6浏览器不支持固定定位（position：fixed）解决方案
今天在学习的时候,突然发现在IE6浏览器下,position:fixed不管用了: 复制代码代码如下: New Document 正常普通流元素 position:fixed元素上面的代码在IE6中 ...
IE6浏览器不支持固定定位（position：fixed）解决方案
经过多次测试,原来不只在IE6下,在IE7.IE8浏览器下,若是文档使用的是怪异(quirk)模式也会导致这个问题.这也难怪,当IE7.8使用怪异模式时,渲染引擎将以接近IE6的渲染模式来解析CSS. ...
Android让APP运行在新环境上,Android Studio环境在真手机运行app项目教程
对于Android Studio环境在真手机运行app项目的相关操作有许多网友咨询过,小编今天就分享Android Studio环境在真手机运行app项目的详细步骤,一起好好学习下吧! 要想将Andr ...
习题 5.7 找出一个二维数组中的鞍点，即该位置上的元素在该行上最大，在该列上最小（也可能没有鞍点）。
C++程序设计(第三版) 谭浩强习题5.7 个人设计习题 5.7 找出一个二维数组中的鞍点,即该位置上的元素在该行上最大,在该列上最小(也可能没有鞍点). 代码块: #include <io ...

uni-app 滑到一定位置固定某个元素在顶部吸顶解决方案 APP端 H5端

uni-app 滑到一定位置固定某个元素在顶部吸顶实例

APP端吸顶

H5端吸顶

uni-app 滑到一定位置固定某个元素在顶部吸顶解决方案 APP端 H5端相关推荐

最新文章

热门文章

uni-app 滑到一定位置固定某个元素在顶部 吸顶解决方案 APP端 H5端

uni-app 滑到一定位置固定某个元素在顶部 吸顶实例

APP端吸顶

H5端吸顶

uni-app 滑到一定位置固定某个元素在顶部 吸顶解决方案 APP端 H5端相关推荐

最新文章

热门文章

uni-app 滑到一定位置固定某个元素在顶部吸顶解决方案 APP端 H5端

uni-app 滑到一定位置固定某个元素在顶部吸顶实例

uni-app 滑到一定位置固定某个元素在顶部吸顶解决方案 APP端 H5端相关推荐