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

前言

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

相关推荐
Amd7941 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You10 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生21 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
sinat_3842410923 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap35 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish43 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js