实现头部Sticky 粘性布局，并且点击菜单滑动到相应位置

@@小旭2026-01-10 20:01

摘要：该代码实现了一个带粘性导航栏的页面滚动功能。通过el-button组件绑定点击事件，调用scrollToCity方法实现平滑滚动到对应ID的区块。使用scrollIntoView的smooth参数实现平滑滚动效果，并通过CSS的position:sticky使导航栏固定在顶部。注意事项包括：祖先元素不能设置overflow:hidden，否则会导致粘性布局失效。导航栏设置了z-index确保始终显示在前端。

复制代码

<template>
<div>
    <div class="buildNameClass">
         <!--给导航项绑定点击事件-->
         <el-button type="primary" @click="scrollToCity('one')">工商信息</el-button>
         <el-button type="primary" @click="scrollToCity('two')">股权关系</el-button>
         <el-button type="primary" @click="scrollToCity('three')">城市布局</el-button>
         <el-button type="primary" @click="scrollToCity('four')">分支机构</el-button>
    </div>
    <div>
        <!--给目标元素加 id -->
        <div class="thirdClass" id="city-one"></div>
        <div class="eighthClass" id="city-two"></div>
        <div class="eighthClass" id="city-three"></div>
        <div class="fourthClass" id="city-four"></div>
    </div>
</div>
<template>

<script>
export default {
    methods: {
        //使用 scrollIntoView({behavior: 'smooth'}) 实现平滑滚动
        scrollToCity(cityId) {
            const element = document.getElementById(`city-${cityId}`);
            if (element) {
                element.scrollIntoView({
                    behavior: 'smooth', // 平滑滚动
                    block: 'start'       // 对齐顶部
                });
            }
        },
    }
}
</script>

<style>
    //css样式粘性布局
    //要注意相关祖先组件不能有overflow: hidden;会导致粘性布局失效
    //如果滚动是body层级控制，则要确保从 .buildNameClass 到 <body> 之间没有任何 overflow:                     hidden;
    .buildNameClass{
        width: 100%;
        height: 50px;
        margin-top: 20px;
        border-radius: 6px;
        background-color: rgba(255,255,255,0.74);
        font-size: 19px;
        font-weight: bold;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: sticky;
        position: -webkit-sticky;
        top: 50px;
        z-index: 9999;
    }
</style>