当前位置:网站首页>Slide the uniapp to a certain height and fix an element to the top effect demo (organize)
Slide the uniapp to a certain height and fix an element to the top effect demo (organize)
2022-07-06 22:34:00 【I'm happy】
After sliding tab Fixed to the top
<template>
<view class="topBox" :class="head==1?'topBoxStyle':''"> Test fixed top test fixed top </view>
</template>
<script>
export default {
data(){
return{
head: 0,
myScroll:0,
}
},
onLoad(e) {
// Get the distance from the target plate to the top
uni.createSelectorQuery().select('.topBox').boundingClientRect(res=>{
this.myScroll =res.top;
console.log(this.myScroll,'this.myScroll-------')
}).exec();
},
methods: {
onPageScroll(e){
// console.log(e,'eeeee')
if(e.scrollTop > this.myScroll){
this.temp= 1
}else{
this.temp= 0
}
},
}
}
</script>
<style>
.boxStyle{
width: 100%;
height: 80rpx;
position: fixed;
top: 0;
left: 0;
background: #fff;
}
</style>
边栏推荐
- 云原生技术--- 容器知识点
- 将MySQL的表数据纯净方式导出
- Memorabilia of domestic database in June 2022 - ink Sky Wheel
- Improving Multimodal Accuracy Through Modality Pre-training and Attention
- 金融人士必读书籍系列之六:权益投资(基于cfa考试内容大纲和框架)
- Attack and defense world miscall
- The SQL response is slow. What are your troubleshooting ideas?
- NPDP certification | how do product managers communicate across functions / teams?
- Return keyword
- NPDP认证|产品经理如何跨职能/跨团队沟通?
猜你喜欢
Netxpert xg2 helps you solve the problem of "Cabling installation and maintenance"
自制J-Flash烧录工具——Qt调用jlinkARM.dll方式
Web APIs DOM 时间对象
【LeetCode】19、 删除链表的倒数第 N 个结点
[Digital IC hand tearing code] Verilog burr free clock switching circuit | topic | principle | design | simulation
视图(view)
2022-07-04 mysql的高性能数据库引擎stonedb在centos7.9编译及运行
机试刷题1
Self made j-flash burning tool -- QT calls jlinkarm DLL mode
Aardio - Method of batch processing attributes and callback functions when encapsulating Libraries
随机推荐
Installation and use of labelimg
二分图判定
three.js绚烂的气泡效果
【编译原理】做了一半的LR(0)分析器
Typescript get function parameter type
SQL server generates auto increment sequence number
【踩坑合辑】Attempting to deserialize object on CUDA device+buff/cache占用过高+pad_sequence
2014阿里巴巴web前实习生项目分析(1)
Data storage (1)
The difference between enumeration and define macro
机试刷题1
[linear algebra] determinant of order 1.3 n
Const keyword
做接口测试都测什么?有哪些通用测试点?
Aardio - construct a multi button component with customplus library +plus
HDU 5077 NAND (violent tabulation)
Classification, function and usage of MySQL constraints
Self made j-flash burning tool -- QT calls jlinkarm DLL mode
Netxpert xg2 helps you solve the problem of "Cabling installation and maintenance"
每日一题:力扣:225:用队列实现栈