实现吸顶效果，一个页面多个元素吸顶效果

前言

新业务开发用到了吸顶效果而且是一个页面滚动到差别的位置差别的元素进行吸顶叠加。我是基于uniapp去写的，原理思路都一样
代码部门

下面的代码我写了两种方法都是一样的一个是通过js控制变量添加元素一个是直接通过css样式进行控制

1.                 <!-- 上半部总览位置 -->
2.                 <view :class="{user_Overview:true}">
3.                    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
4.                 </view>
5.                 <!-- 中间搜索框 -->
6.     <view  :class="{input_box:true,stickystyle2:stickystyle2}">
7.         xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
8.     </view>
10.   <script>
11. import {getCurrentDate} from '@/common/util.js'
12.         export default {
13.                 data() {
14.                         return {
15.                            stickystyle2:false,
16.                         }
18.                 methods: {
19.                         //离开这个页面的时候栏吸顶效果消失
20.                         onUnload(){
21.                           this.stickystyle1=false;
22.                           this.stickystyle2=false;
23.                         },
24.                         onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
25.                           // console.log("滚动距离为：" + e.scrollTop);
26.                           if(e.scrollTop>380){
27.                             this.stickystyle2=true
28.                           }else{
29.                             this.stickystyle2=false
30.                           }
31.                         },
32.                 }
33.         }
35. </script>
36. <style>
37. //第一中方式直接设置position: fixed;，但是该元素不触发吸顶的时候脱离文档流后面的元素会补位，
38. //所以需要给后一个元素进行设置padding-top或者maigin-top值就是该元素的高度
39. //这个地方设置position: sticky;也是可以的
40.         .user_Overview{
41.                 width: 750rpx;
42.                 height: 70rpx;
43.                 // border: 1px solid red;
44.                 display: flex;
45.                 position: fixed;
46.                 top: 0;
47.                 left: 0;
48.                 z-index: 99;
49.                 justify-content: space-between;
50.                 padding:0rpx 32rpx;
51.                 background-image: linear-gradient(180deg, #FFE7D2 0%, #FFE7D2 100%);
52.          }
53.   .input_box{
54.     padding:16rpx 32rpx 16rpx 32rpx;
55.     background: #FFFFFF;
56.     height: 100rpx;
57.    }
58.      .stickystyle2{
59.     position: fixed;
60.     top: 70rpx;
61.     left: 0;
62.     width: 100%;
63.     z-index: 999;
64.     // #ifdef APP-PLUS
65.     top: 158rpx;
66.     left: 0;
67.     // #endif
68.   }
69. </style>

复制代码

结语

吸顶效果很常见，这是我自己的写法，是通过uniapp自带的监听滚动变乱，如果是vue使用window.addEventListener(“scroll”, this.add);大概js可以通过document.body.scrollTop，一通百通。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。