Vue项目中元素溢出导航栏时如何隐藏其box-shadow样式

最终更新 #

我已成功实现需求。我创建了一个变量记录当前所在的根路由，在导航栏代码中使用带条件参数的v-bind，同时将box-shadow相关样式代码从style区块迁移到HTML区块，以便在v-bind中使用，感谢大家的帮助。

问题描述 #

网站全站通用导航栏默认配置了box-shadow阴影样式，所有页面都会展示该导航栏。但首页存在一个hero-section区块，设置了负margin向上溢出，会覆盖在导航栏下层，该场景下需要隐藏导航栏的阴影。

• 预期首页效果：导航栏无阴影，和hero区块自然融合
• 预期其他页面效果：导航栏显示默认阴影

之前尝试给导航栏内容设置更高z-index，但方案未生效。

现有代码 #

导航栏样式代码 #

header {
    background-color: transparent;
    padding: 0 25px;
    z-index: 1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);


    .link {
        font-weight: 500;
        font-size: 14px;
        padding: 0 2px;
        transition: 0.3s color ease;
        z-index: 110;
        &:hover {
            color: #1eb8b8;
        }
    }
}

hero-section区块样式代码 #

.hero-section {
  z-index: 100;
  display: flex;
  justify-content: center;
  background-image: url(../assets/hero.jpg);
  margin-top: -145px;
  height: 115vh;
  width: 100%; 
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  align-items: center;
}

补充说明 #

hero-section区块和导航栏分属两个不同的组件文件

导航栏HTML结构代码 #

<header>
    <nav class="container">
        <div class="nav-links">
            <ul v-show="!mobile">
                <router-link class="link" :to="{name: 'Home'}">Home</router-link>
                <router-link class="link" :to="{name: 'Prints'}">Prints</router-link>
                <router-link class="link" :to="{name: 'Blogs'}">Blogs</router-link>

导航链接位于header区块内部下方，推测这是z-index方案不生效的原因

hero-section区块HTML结构代码 #

<div class="home">
    <div class="hero-section">
      <h2>Welcome to my website!</h2>
    </div>
</div>

内容的提问来源于stack exchange，提问作者wepzen