修改文章界面样式

src/styles/markdown.scss

@@ -171,7 +171,6 @@
   box-shadow: rgba(0,0,0,0.1) 0 2px 12px 0;
   width: 285px;
   top: 70px;
-  //bottom: 20px;
   overflow: auto;
   float: right;
   position: fixed;
@@ -182,6 +181,15 @@
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
+  .toc-content {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    box-shadow: -4px -9px 20px #000;
+    -webkit-backdrop-filter: saturate(360%) blur(8px);
+    backdrop-filter: saturate(360%) blur(8px);
+    background-color: rgba(255,255,255,0.72);
+  }
 }
 ::-webkit-scrollbar {
   /*滚动条整体样式*/

src/views/public/article/index.vue

@@ -30,7 +30,7 @@
 
           <div v-show="titleList.length > 0" class="right-bj">
             <div class="slimScrollDiv">
-              <div class="right-menu" style="max-height: 700px">
+              <div class="right-menu" :style="{maxHeight:maxMenuHeight+'px'}">
                 <div class="toc-content">
                   <header class="toc-header"><svg-icon icon-class="contents"></svg-icon><span>目录</span></header>
                 </div>
@@ -67,6 +67,7 @@
         titleList: [],
         tocMaxHeight: 500,
         befterScrollTop: 0,
+        maxMenuHeight: document.documentElement.clientHeight - 155
       }
     },
     mounted() {
@@ -74,7 +75,10 @@
         this.getMarkDown()
         this.showList = false
       }
-
+      let that = this
+      window.onresize = function temp() {
+        that.maxMenuHeight= document.documentElement.clientHeight - 155
+      }
     },
     methods: {
       onScroll() {