vue-cli4项目中的吸顶效果

「爱情、让人受尽委屈。」 2022-12-02 00:49 194阅读 0赞

### 1.html ###

<div id="showDays" :class="headerFixed?'issFixed':''">
        <van-tabs v-model="active">
          <van-tab title="标签 1">内容 1</van-tab>
          <van-tab title="标签 2">内容 2</van-tab>
          <van-tab title="标签 3">内容 3</van-tab>
        </van-tabs>
    </div>

### 2. javascript ###

data() { 
        return { 
          headerFixed:0, //是否吸顶 条件
          offsetTop:0  //元素的offsetTop
        }
      },
    mounted() {  
        // 监听dom渲染完成
    		this.$nextTick(function(){ 
    		// 这里fixedHeaderRoot是吸顶元素的ID
    		let header = document.getElementById("showDays");
    		// 这里要得到top的距离和元素自身的高度
    		this.offsetTop = header.offsetTop;
    		console.log("offsetTop:" + this.offsetTop);
    		});
    	// handleScroll为页面滚动的监听回调
    		window.addEventListener('scroll', this.handleScroll);
      },
     destroyed(){ 
    		window.removeEventListener('scroll', this.handleScroll);
    	},
    	
    methods: { 
        handleScroll(){ 
    		// 得到页面滚动的距离
    		let scrollTop = window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop;						
        // 判断页面滚动的距离是否大于吸顶元素的位置 console.log("divoffsetTOP"+document.getElementById("showDays").offsetTop);
    
          //如果滚动距离 大于元素的offsetTop 就返回1，吸顶
          //如果滚动距离 小于元素的offsetTop 就返回0，不吸顶
         this.headerFixed=scrollTop>this.offsetTop?1:0
    		},

### 3. css ###

.issFixed{ 
    	position: fixed;
    	top:0px;
    	left:0px;
    	right:0px;
    	z-index: 4;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，194人围观）

还没有评论，来说两句吧...

相关阅读

相关 html实现吸顶效果的几种方式

页面下拉之前是这样的： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

谁践踏了优雅/ 2023年06月20日 03:59/ 0 赞/ 16 阅读

相关小程序中的吸顶效果（小程序操作DOM）

小程序中的吸顶效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

Myth丶恋晨/ 2022年12月29日 09:37/ 0 赞/ 168 阅读

相关 vue-cli4项目中的吸顶效果

1.html  <div id="showDays" :class="

「爱情、让人受尽委屈。」/ 2022年12月02日 00:49/ 0 赞/ 195 阅读

相关微信小程序实现吸顶效果

先看一下效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

叁歲伎倆/ 2022年11月27日 10:29/ 0 赞/ 335 阅读

相关元素滚动吸顶效果

position: sticky 粘性定位的元素是依赖于用户的滚动. 它的行为就像 position:relative，而当页面滚动超出目标区域时，它的表现就像 posit

曾经终败给现在/ 2022年11月03日 10:43/ 0 赞/ 243 阅读

相关小程序吸顶效果

<template> <view class="full"> <view class="full222"> </vie

比眉伴天荒/ 2022年10月05日 08:58/ 0 赞/ 243 阅读

相关 html设置吸顶效果

html设置吸顶效果方法一：js设置 window.onscroll = function () { // 滑动时搜索框吸顶

青旅半醒/ 2022年09月03日 05:17/ 0 赞/ 551 阅读

相关 js 吸顶 vue 吸顶

页面吸顶的效果，实现有两种，最快的一种是用position: sticky方法，不过该方法尚存在兼容性问题，使用的时候需加入兼容方法。使用方法跟position:

客官°小女子只卖身不卖艺/ 2022年01月23日 13:11/ 0 赞/ 365 阅读

相关 vue中实现元素吸顶效果

效果图： ![20210502105208962.gif][] 注意：窗口会抖动，体验不是很好，后期再优化代码实现： <template>

分手后的思念是犯贱/ 2021年07月25日 13:40/ 0 赞/ 960 阅读

相关 better-scroll切换栏吸顶效果

图片加载完成后,通过ref来获取组件距离父元素顶部的高度,通过监听滚动事件,把滚动y坐标和组件距离父元素顶部的距离比较,找到吸顶的临界值暴露了问

￡神魔★判官ぃ/ 2021年07月25日 02:24/ 0 赞/ 620 阅读