From 13629b207049b161c5eabe14422f3e1f3fbe11c7 Mon Sep 17 00:00:00 2001
From: wChenonly <37658262+wChenonly@users.noreply.github.com>
Date: Sat, 14 Jan 2023 21:50:07 +0800
Subject: [PATCH] fix(doc): sidebar covers nav when scrolling (#11468)

---
 .../site/desktop/components/Header.vue        |  2 ++
 .../vant-cli/site/desktop/components/Nav.vue  | 22 +++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/vant-cli/site/desktop/components/Header.vue b/packages/vant-cli/site/desktop/components/Header.vue
index dff09df2a..4547b0eb2 100644
--- a/packages/vant-cli/site/desktop/components/Header.vue
+++ b/packages/vant-cli/site/desktop/components/Header.vue
@@ -172,6 +172,8 @@ export default {
   width: 100%;
   background-color: var(--van-doc-header-background);
   user-select: none;
+  position: relative;
+  z-index: 2;
 
   &__top {
     display: flex;
diff --git a/packages/vant-cli/site/desktop/components/Nav.vue b/packages/vant-cli/site/desktop/components/Nav.vue
index a501d3f96..5164a5a61 100644
--- a/packages/vant-cli/site/desktop/components/Nav.vue
+++ b/packages/vant-cli/site/desktop/components/Nav.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="van-doc-nav" :style="style">
+  <div :class="['van-doc-nav', { 'van-doc-nav-fixed': isFixed }]">
     <div
       v-for="(group, index) in navConfig"
       class="van-doc-nav__group"
@@ -38,19 +38,11 @@ export default {
 
   data() {
     return {
-      top: 64,
-      bottom: 0,
+      isFixed: false,
     };
   },
 
   computed: {
-    style() {
-      return {
-        top: this.top + 'px',
-        bottom: this.bottom + 'px',
-      };
-    },
-
     base() {
       return this.lang ? `/${this.lang}/` : '/';
     },
@@ -64,7 +56,7 @@ export default {
   methods: {
     onScroll() {
       const { pageYOffset: offset } = window;
-      this.top = Math.max(0, 64 - offset);
+      this.isFixed = offset > 64;
     },
   },
 };
@@ -72,8 +64,10 @@ export default {
 
 <style lang="less">
 .van-doc-nav {
-  position: fixed;
+  position: absolute;
   left: 0;
+  top: var(--van-doc-header-top-height);
+  bottom: 0;
   z-index: 1;
   min-width: var(--van-doc-nav-width);
   max-width: var(--van-doc-nav-width);
@@ -86,6 +80,10 @@ export default {
     margin-left: calc((var(--van-doc-row-max-width) / 2 * -1));
   }
 
+  &.van-doc-nav-fixed {
+    position: fixed;
+    top: 0;
+  }
   &::-webkit-scrollbar {
     width: 6px;
     height: 6px;