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

前言

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

相关推荐
华仔啊1 天前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel1 天前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴1 天前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa
excel1 天前
Vue3 响应式核心源码全解析:Dep、Link 与 track/trigger 完整执行机制详解
前端
前端大卫1 天前
一个关于时区的线上问题
前端·javascript·vue.js
whltaoin1 天前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
IT派同学1 天前
TableWiz诞生记:一个被表格合并逼疯的程序员如何自救
前端·vue.js
西洼工作室1 天前
CSS高效开发三大方向
前端·css
昔人'1 天前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
铅笔侠_小龙虾1 天前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js