vue页面实现＜div＞块初始化隐藏，随滚动条滚动到一定位置显示的功能

功能描述

最近需要在项目里实现固定div块，初始化不显示，随着滚动条滚动到指定位置后显示的功能：

---

---

实现思路

初始化时，设置需要固定的div块布局显示为隐藏，监听滚动条位置，当滚动条滚动到指定位置时，调整该div块为显示状态，并将该div块设置为固定定位

---

代码实现

<template>
	<div id="outbody">
		<div id="leftmenu" :style="{ display: leftmenuDisplay,position: leftmenuPosition,top: scrollPosition+'px'}">
       
</div>
	</div>
</template>

<script>
export default {
	data() {
		leftmenuDisplay: 'none',
        leftmenuPosition: 'static',
        scrollPosition: 0
	},
	mounted(){
      var targetbody = document.getElementById('outbody'); // 根据id选择目标div元素
      targetbody.addEventListener('scroll', this.handleScroll); // 监听滚动事件
    },
    beforeDestroy() {
      var targetbody = document.getElementById('outbody'); // 根据id选择目标div元素
      targetbody.removeEventListener('scroll', this.handleScroll); // 移除滚动事件监听器
    },
	methods:{
		handleScroll() {
	        var targetbody = document.getElementById('outbody'); // 根据id选择目标div元素
	        if(targetbody.scrollTop >= 300){
	          var targetDiv = document.getElementById('leftmenu'); // 根据id选择目标div元素
	          this.leftmenuDisplay = 'block';
	          this.scrollPosition = 200; // 更新滚动条位置
	          this.middleLeft = '18';
	          this.leftmenuPosition = 'fixed'
	        }else{
	          this.leftmenuDisplay = 'none';
	        }
      },
	}
}
</script>