html +vant 导航栏以及收起展开吸顶

html + vant 布局

 <van-sticky>
   <van-nav-bar title="详情" left-text="返回" left-arrow>
     <template #right>
      <van-icon name="wap-nav" size="18" @click="moreShow = !moreShow" />
     </template>
   </van-nav-bar>
    <div v-if="moreShow" class="moreBox">
     <van-grid :column-num="4">
       <van-grid-item v-for="(value, i) in moreList" :key="i" :icon="value.icon" :text="value.tag" />
      </van-grid>
    </div>
 </van-sticky>

数据

data() {
  return {
     moreShow: false,
     moreList: [
        { tag: "vip", icon: 'vip-card-o', },
        { tag: "喜欢", icon: 'like-o', },
        { tag: "收藏", icon: 'star-o', },
        { tag: "爆款", icon: 'fire-o', },
        { tag: "新款", icon: 'new-o', },
        { tag: "购物车", icon: 'shopping-cart-o', },
        { tag: "客服中心", icon: 'service-o', },
        { tag: "设置", icon: 'setting-o', },
     ],
   }
 },

css样式

<style>
 .van-cell__title {
        color: #1989fa;
    }

    i.van-badge__wrapper.van-icon.van-icon-arrow-left.van-cell__left-icon {
        color: #1989fa;
    }

    .moreBox {
        position: absolute;
        z-index: 2;
        left: 0;
        right: 0;
    }
</style>

 效果

 展开效果

 展开不挡住下面文章写法

 <van-sticky>
   <van-nav-bar title="详情" left-text="返回" left-arrow>
     <template #right>
      <van-icon name="wap-nav" size="18" @click="moreShow = !moreShow" />
     </template>
   </van-nav-bar>
 </van-sticky>
    <div v-if="moreShow">
     <van-grid :column-num="4">
       <van-grid-item v-for="(value, i) in moreList" :key="i" :icon="value.icon" :text="value.tag" />
      </van-grid>
    </div>

粘性布局只包含导航栏，不包含展开内容，展开内容样式.moreBox去掉