实现效果

实现方法

下面展示的为关键代码，想要查看完整流程及代码可参考https://blog.csdn.net/weixin_43312391/article/details/139197550

isMenuBarFixed为控制左侧菜单是否固定的参数

// 监听滚动事件
const handleScroll = () => {const scrollTopThreshold = 428;const scrollTop = document.body.scrollTop; // 获取滚动位置if (scrollTop >= scrollTopThreshold) {isMenuBarFixed.value = true;} else {isMenuBarFixed.value = false;}
};onMounted(async () => {await nextTick(); // 等待 DOM 更新boxWidth.value = myDiv.value.offsetWidth; // 确保 myDiv 已经被定义并且 DOM 已经渲染document.body.addEventListener('scroll', handleScroll); // 添加滚动事件监听器
});
// 组件卸载前
onUnmounted(() => {document.body.removeEventListener('scroll', handleScroll()); // 移除滚动事件监听器
});