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

前言

新业务开发用到了吸顶效果而且是一个页面滚动到不同的位置不同的元素进行吸顶叠加。我是基于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,一通百通。

相关推荐
mapbar_front18 小时前
react项目开发—关于代码架构/规范探讨
前端·react.js
二木一夕18 小时前
Vue 3 的组合式 API和传统选项式 API区别(vue2转vue3,两者差异)
前端
LuckySusu18 小时前
【vue篇】Vue 项目中的静态资源管理:assets vs static 终极指南
前端·vue.js
LuckySusu18 小时前
【vue篇】Vue.delete vs delete:数组删除的“陷阱”与正确姿势
前端·vue.js
LuckySusu18 小时前
【vue篇】Vue 模板编译原理:从 Template 到 DOM 的翻译官
前端·vue.js
小菜摸鱼18 小时前
Node.js + vue3 大文件-切片上传全流程(视频文件)
前端·node.js
LuckySusu18 小时前
【vue篇】Vue 2 响应式“盲区”破解:如何监听对象/数组属性变化
前端·vue.js
LuckySusu18 小时前
【vue篇】Vue Mixin:可复用功能的“乐高积木”
前端·vue.js
勤奋菲菲18 小时前
Vue3+Three.js:requestAnimationFrame的详细介绍
开发语言·javascript·three.js·前端可视化
洋不写bug19 小时前
前端环境搭建,保姆式教学
前端