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

前言

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

相关推荐
m0_64880493_江哥3 分钟前
Python实现随机选播视频的示例代码
前端·python·音视频
_大学牲4 分钟前
禁止复制内容 🤔 那点事~
前端·chrome·程序员
申阳8 分钟前
Day 1:耗时2小时,梳理并分享我作为全栈开发最依赖的“兵器库”
前端·后端·程序员
思考着亮8 分钟前
formData
javascript
UIUV37 分钟前
CSS 高级动画学习笔记 —— 从 “亲吻小球” 案例看 CSS 核心技术
前端·css
星链引擎1 小时前
智能聊天机器人 技术架构核心实现与场景化落地
前端
yoyoma1 小时前
彻底搞懂 JavaScript 闭包:原理、陷阱与内存优化全解析
前端·javascript
茄汁面1 小时前
Angular(TypeScript ) 中基于 ExcelJS 实现导入模板下载功能(带样式与数据验证)
前端·javascript·node.js
前端九哥1 小时前
老板:就是你小子删光了try-catch?
前端·javascript
杰出的胡兵1 小时前
2v1带您实战12nm高级数字后端
前端·soc·数字后端·数字ic后端·芯片设计全流程培训