如何将父导航标题和底部导航一个接一个地附加

Question

我尝试将我的底部导航栏与父目录一个接一个地附加，但是当我向上滚动时，它会重叠。

我正在尝试使用vue js绑定方法（即，使用计算方法的：class）绑定我的固定位置类。

没有得到想要的结果。

我的.css代码

父导航CSS

 nav {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans- 
    serif;
    width: 100%;
    position: fixed !important;
    color:black;
    display: block;
    z-index: 3;

}

底部导航CSS

.navpills {
  background-color:black;
  overflow: hidden;
  width: 100%;
  height: 3.5em;
  margin-bottom: 1em;
  margin-left: 2em;
  margin-top: 0em;
  z-index: 2;
}
.fix {
  position: sticky !important;
  top: 90px;
  width: 100%;
  left:0;
  right:0;
  padding-top: 10px;
}
.navpills a {
  font-size: 1.5em;
  font-family: cursive;
  padding-right: 1em;
}

HTML代码

<section :class="fixclass"> 
      <appnavpills></appnavpills>
      </section>

data: {
    attach: true

  },
  computed: {
   fixclass: function() {
     return {
       fix: this.attach
     }
   }
  },

滚动时，底部标题重叠enter image description here