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

无尘本无物2024-08-03 13:48

前言

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

代码部分

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

js 复制代码

		<!-- 上半部总览位置 -->
		<view :class="{user_Overview:true}">
                   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
		</view>
		<!-- 中间搜索框 -->
    <view  :class="{input_box:true,stickystyle2:stickystyle2}">
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    </view>

  <script>
import {getCurrentDate} from '@/common/util.js'
	export default {
		data() {
			return {
                           stickystyle2:false,
                        }

		methods: {
                        //离开这个页面的时候栏吸顶效果消失
                        onUnload(){
                          this.stickystyle1=false;
                          this.stickystyle2=false;
                        },
                        onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
                          // console.log("滚动距离为：" + e.scrollTop);
                          if(e.scrollTop>380){
                            this.stickystyle2=true
                          }else{
                            this.stickystyle2=false
                          }
                        },
		}
	}

</script>
 <style>
 //第一中方式直接设置position: fixed;，但是该元素不触发吸顶的时候脱离文档流后面的元素会补位，
 //所以需要给后一个元素进行设置padding-top或者maigin-top值就是该元素的高度
 //这个地方设置position: sticky;也是可以的
 	.user_Overview{
		width: 750rpx;
		height: 70rpx;
		// border: 1px solid red;
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		justify-content: space-between;
		padding:0rpx 32rpx;
		background-image: linear-gradient(180deg, #FFE7D2 0%, #FFE7D2 100%);
         }
  .input_box{
    padding:16rpx 32rpx 16rpx 32rpx;
    background: #FFFFFF;
    height: 100rpx;
   }
     .stickystyle2{
    position: fixed;
    top: 70rpx;
    left: 0;
    width: 100%;
    z-index: 999;
    // #ifdef APP-PLUS
    top: 158rpx;
    left: 0;
    // #endif
  }
 </style>

结语

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