docs: update doc toc

site/src/layouts/index.vue

@@ -1,5 +1,20 @@
 <template>
   <Header />
+  <div v-if="headers.length" class="toc-affix" :style="y > 60 ? 'position:fixed; top: 16px;' : ''">
+    <a-anchor style="width: 160px">
+      <a-anchor-link
+        v-for="h in headers"
+        :key="h.title"
+        :href="h.href || `#${slugifyTitle(h.title)}`"
+        :target="h.target"
+      >
+        <template #title>
+          <LinkOutlined v-if="h.target" />
+          {{ isZhCN ? h.title : h.enTitle || h.title }}
+        </template>
+      </a-anchor-link>
+    </a-anchor>
+  </div>
   <div class="main-wrapper">
     <a-row>
       <template v-if="isMobile">
@@ -43,21 +58,6 @@
             <component :is="matchCom" />
           </Demo>
           <router-view v-else />
-          <a-affix v-if="headers.length" class="toc-affix" :offset-top="20">
-            <a-anchor>
-              <a-anchor-link
-                v-for="h in headers"
-                :key="h.title"
-                :href="h.href || `#${slugifyTitle(h.title)}`"
-                :target="h.target"
-              >
-                <template #title>
-                  <LinkOutlined v-if="h.target" />
-                  {{ isZhCN ? h.title : h.enTitle || h.title }}
-                </template>
-              </a-anchor-link>
-            </a-anchor>
-          </a-affix>
         </section>
         <a-back-top />
         <div class="fixed-widgets" :style="isZhCN ? { bottom: '175px' } : {}">
@@ -100,6 +100,7 @@ import { CloseOutlined, MenuOutlined, LinkOutlined } from '@ant-design/icons-vue
 import ThemeIcon from './ThemeIcon.vue';
 import surelyVueVue from '../components/surelyVue.vue';
 import WWAdsVue from '../components/rice/WWAds.vue';
+import { useWindowScroll } from '@vueuse/core';
 
 const rControl = /[\u0000-\u001f]/g;
 const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g;
@@ -123,6 +124,7 @@ export default defineComponent({
     LinkOutlined,
   },
   setup() {
+    const { y } = useWindowScroll();
     const visible = ref(false);
     const route = useRoute();
     const globalConfig = inject<GlobalConfig>(GLOBAL_CONFIG);
@@ -249,6 +251,7 @@ export default defineComponent({
         // color: '#fff',
         fontSize: '20px',
       },
+      y,
     };
   },
 });

site/src/theme/static/responsive.less

@@ -12,13 +12,12 @@
 }
 
 @media only screen and (max-width: @screen-lg) {
-  .main-container {
-    padding-right: 48px;
-    padding-left: 48px;
-
   .toc-affix {
     display: none;
   }
+  .main-container {
+    padding-right: 48px;
+    padding-left: 48px;
   }
   .code-boxes-col-2-1,
   .code-boxes-col-1-1 {

site/src/theme/static/toc.less

@@ -69,11 +69,20 @@ ul.toc > li {
 
 .toc-affix {
   position: absolute;
-  top: 8px;
+  top: 80px;
-  right: 20px;
+  right: 0px;
+  width: 160px;
+  padding: 8px 8px 8px 4px;
+  border-radius: 6px;
+  box-sizing: border-box;
+  z-index: 9;
+  .ant-anchor-wrapper {
+    max-height: ~'calc(100vh - 200px)' !important;
+    overflow-y: auto;
+  }
   .ant-affix {
     z-index: 9;
-    max-height: ~'calc(100vh - 16px)';
+    max-height: ~'calc(100vh - 200px)';
     overflow-x: hidden;
     overflow-y: auto;
     background: #fff;