fazyqjczx_org_cn/components/home/pageNavigation.vue

<template>
    <div class="nav" :class="{ 'nav-fixed': isFixed }" ref="navRef">
        <div class="partOne">
            <div class="itemHome">
                <a href="/">首页</a>
            </div>
            <div class="itemContent">
                <div v-for="item in navList1" :key="item.name" class="item">
                    <a :href="item.url">{{ item.name }}</a>
                </div>
            </div>
        </div>
        <div class="partTwo">
            <div class="itemHome">
                <a href="#">互动</a>
            </div>
            <div class="itemContent">
                <div v-for="item in navList2" :key="item.name" class="item">
                    <a :href="item.url">{{ item.name }}</a>
                </div>
            </div>
        </div>
        <div class="partThree">
            <div class="itemHome">
                <a href="#">查询</a>
            </div>
            <div class="itemContent">
                <div v-for="item in navList3" :key="item.name" class="item">
                    <a :href="item.url">{{ item.name }}</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 1. 定义响应式状态：是否固定导航栏
const isFixed = ref(false);
// 2. 获取导航栏 DOM 引用
const navRef = ref(null);
// 3. 存储导航栏初始顶部位置
let navOffsetTop = 0;

// 滚动事件处理函数
const handleScroll = () => {
    // 判断滚动距离是否超过导航栏初始位置
    isFixed.value = window.scrollY >= navOffsetTop;
};

onMounted(() => {
    // 组件挂载后，获取导航栏初始顶部位置
    navOffsetTop = navRef.value.offsetTop;
    // 监听滚动事件
    window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
    // 组件卸载时移除监听，避免内存泄漏
    window.removeEventListener('scroll', handleScroll);
});

const navList1 = [
    {
        name: '法制资讯',
        url: '/sannongzixunzhifuxinxi/list-1.html'
    },
    {
        name: '各地动态',
        url: '/about'
    },
    {
        name: '特别关注',
        url: '/law'
    },
    {
        name: '媒体视点',
        url: '/case'
    },
    {
        name: '法纪通报',
        url: '/contact'
    },
    {
        name: '今日说法',
        url: '/contact'
    },
    {
        name: '政策法规',
        url: '/case'
    },
    {
        name: '政策解读',
        url: '/'
    },
    {
        name: '政务公开',
        url: '/about'
    },
    {
        name: '内参纪要',
        url: '/law'
    },
    {
        name: '执法在线',
        url: '/case'
    },
    {
        name: '法制监察',
        url: '/contact'
    },
    {
        name: '监督调查',
        url: '/contact'
    },
    {
        name: '社会调研',
        url: '/case'
    },
    {
        name: '典型案例',
        url: '/'
    },
    {
        name: '廉政时讯',
        url: '/about'
    },
    {
        name: '法制时评',
        url: '/law'
    },
    {
        name: '法制宣传',
        url: '/case'
    },
    {
        name: '百姓话题',
        url: '/contact'
    },
    {
        name: '投诉举报',
        url: '/contact'
    },
    {
        name: '经济与法',
        url: '/case'
    },
    {
        name: '法制建设',
        url: '/case'
    }
]
const navList2 = [
    {
        name: '领导信箱',
        url: '/'
    },
    {
        name: '投诉举报',
        url: '/about'
    },
    {
        name: '网上政务',
        url: '/law'
    },
    {
        name: '志愿服务',
        url: '/case'
    },
    {
        name: '公益活动',
        url: '/contact'
    },
    {
        name: '在线服务',
        url: '/zaixianfuwu'
    },
    {
        name: '网民留言',
        url: '/wangminliuyan'
    },
    {
        name: '法制知识',
        url: '/'
    },
    {
        name: '法律咨询',
        url: '/falvzixun'
    },
    {
        name: '通知公告',
        url: '/law'
    },
    {
        name: '官网导航',
        url: '/guanwangdaohang'
    }
]
const navList3 = [
    {
        name: '人员查询',
        url: '/'
    },
    {
        name: '车辆查询',
        url: '/about'
    },
    {
        name: '地市中心',
        url: '/law'
    },
    {
        name: '调研选题',
        url: '/case'
    },
    {
        name: '介绍信查询',
        url: '/contact'
    },
    {
        name: '核心网站',
        url: '/hexinwangzhan'
    },
    {
        name: '政务百网',
        url: '/zhengwubaiwang'
    },
    {
        name: '行业百网',
        url: '/hangyebaiwang'
    },
    {
        name: '规章制度',
        url: '/guizhangzhidu'
    },
    {
        name: '申请加入',
        url: '/shenqingjiaru'
    },
    {
        name: '项目官网',
        url: '/xiangmuguanwang'
    }
]

</script>

<style lang="less" scoped>
// >1400px
@media screen and (min-width: 1401px) {
    .nav {
        position: sticky; //粘性定位
        top: 0; //滚动到距离顶部0px时固定
        z-index: 9999; //保证固定时在其他内容上方
        width: 100%;
        font-family: "微软雅黑", "microsoft yahei";
        padding: 20PX 0;
        background: rgba(255, 255, 255, 0.8);
        box-sizing: border-box;

        .partOne {
            width: 1400PX;
            height: 70PX;
            background-color: #a60807;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;

            .itemHome {
                width: 70PX;
                height: 70PX;
                line-height: 70PX;
                overflow: hidden;
                font-size: 16PX;
                color: #fff;
                font-weight: bold;
                text-align: center;

                a {
                    font-size: 16PX;
                    font-weight: bold;
                    color: #fff;
                }
            }

            .itemContent {
                width: 1330PX;
                height: 70PX;
                line-height: 25PX;
                display: flex;
                flex-wrap: wrap;

                .item {
                    width: 120PX;

                    a {
                        display: inline-block;
                        width: 120PX;
                        font-size: 16PX;
                        font-weight: bold;
                        color: #fff;
                        text-align: center;

                        &:hover {
                            color: #FF8000;
                        }
                    }
                }
            }
        }

        .partTwo {
            width: 1400PX;
            height: 40PX;
            background-color: #c53729;
            margin: 0 auto;
            border-top: 4PX solid #fff;
            display: flex;
            justify-content: flex-start;
            align-items: center;


            .itemHome {
                width: 70PX;
                height: 40PX;
                line-height: 40PX;
                overflow: hidden;
                font-size: 16PX;
                color: #fff;
                font-weight: bold;
                text-align: center;

                a {
                    font-size: 16PX;
                    font-weight: bold;
                    color: #fff;
                }
            }

            .itemContent {
                height: 40PX;
                line-height: 30PX;
                display: flex;
                flex-wrap: wrap;

                .item {
                    width: 120PX;
                    line-height: 30PX;

                    a {
                        display: inline-block;
                        width: 120PX;
                        font-size: 16PX;
                        font-weight: bold;
                        color: #fff;
                        text-align: center;

                        &:hover {
                            color: #FF8000;
                        }
                    }

                }
            }
        }

        .partThree {
            width: 1400PX;
            height: 40PX;
            background-color: #d4ab73;
            margin: 0 auto;
            border-top: 4PX solid #fff;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;

            .itemHome {
                width: 70PX;
                height: 40PX;
                line-height: 40PX;
                overflow: hidden;
                font-size: 16PX;
                color: #fff;
                font-weight: bold;
                text-align: center;

                a {
                    font-size: 16PX;
                    font-weight: bold;
                    color: #fff;
                }
            }

            .itemContent {
                height: 40PX;
                line-height: 30PX;
                display: flex;
                flex-wrap: wrap;

                .item {
                    width: 120PX;
                    line-height: 30PX;

                    a {
                        display: inline-block;
                        width: 120PX;
                        font-size: 16PX;
                        font-weight: bold;
                        color: #fff;
                        text-align: center;

                        &:hover {
                            color: #FF8000;
                        }
                    }

                }
            }
        }
    }

    /* 固定在顶部时的样式 */
    .nav-fixed {
        position: fixed;
        top: 0;
        left: 0;
        background-color: #fff;
    }
}

// 800px-1400px
@media (min-width: 801px) and (max-width: 1400px) {
    .nav {
        position: sticky !important; //粘性定位
        top: 0; //滚动到距离顶部0px时固定
        z-index: 1; //保证固定时在其他内容上方
        width: 100%;
        font-family: "微软雅黑", "microsoft yahei";

        .partOne {
            width: 100%;
            height: auto;
            background-color: #a60807;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;

            .itemHome {
                width: 8%;
                overflow: hidden;
                font-size: 16PX;
                color: #fff;
                font-weight: bold;
                text-align: center;

                a {
                    font-size: 16PX;
                    font-weight: bold;
                    color: #fff;
                }
            }

            .itemContent {
                width: 92%;
                line-height: 30PX;

                .item {
                    width: 120PX;
                    float: left;

                    a {
                        display: inline-block;
                        width: 120PX;
                        font-size: 16PX;
                        font-weight: bold;
                        color: #fff;
                        text-align: center;

                        &:hover {
                            color: #FF8000;
                        }
                    }

                }
            }
        }

        .partTwo {
            width: 100%;
            height: auto;
            background-color: #c53729;
            margin: 0 auto;
            border-top: 4PX solid #fff;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;

            .itemHome {
                width: 8%;
                height: auto;
                overflow: hidden;
                font-size: 16PX;
                color: #fff;
                font-weight: bold;
                text-align: center;

                a {
                    font-size: 16PX;
                    font-weight: bold;
                    color: #fff;
                }
            }

            .itemContent {
                width: 92%;
                line-height: 30PX;

                .item {
                    width: 120PX;
                    float: left;
                    line-height: 30PX;

                    a {
                        display: inline-block;
                        width: 120PX;
                        font-size: 16PX;
                        font-weight: bold;
                        color: #fff;
                        text-align: center;

                        &:hover {
                            color: #FF8000;
                        }
                    }

                }
            }
        }

        .partThree {
            width: 100%;
            height: auto;
            background-color: #d4ab73;
            margin: 0 auto;
            border-top: 4PX solid #fff;
            display: flex;
            justify-content: center;
            align-items: center;

            .itemHome {
                width: 8%;
                overflow: hidden;
                font-size: 16PX;
                color: #fff;
                font-weight: bold;
                text-align: center;

                a {
                    font-size: 16PX;
                    font-weight: bold;
                    color: #fff;
                }
            }

            .itemContent {
                width: 92%;
                line-height: 30PX;

                .item {
                    width: 120PX;
                    float: left;
                    line-height: 30PX;

                    a {
                        display: inline-block;
                        width: 120PX;
                        font-size: 16PX;
                        font-weight: bold;
                        color: #fff;
                        text-align: center;

                        &:hover {
                            color: #FF8000;
                        }
                    }

                }
            }
        }
    }
}

// <=800px
@media (max-width: 800px) {
    .nav {
        display: none;
    }
}
</style>