首页、关于、留言板右侧部分设置为粘性布局

Author: SunQQQ

src/components/MainPage/BlogIndex.vue

@@ -45,7 +45,7 @@
             <div class="ListBottom" v-if="AticleBottom">你滑到我底线啦</div>
             <Pagination v-on:PaginationToParent="ValueByPagition" ref="Pagi"></Pagination>
           </div>
-          <div class="BlogIndexContentRight">
+          <div class="BlogIndexContentRight blogindex-page">
             <div class="Module HotArticleModule">
               <transition name="Fade">
                 <img src="../../static/img/HotArticleList.jpg" v-if="DefaultGraph.HotArticlePart">

src/components/MainPage/MessageBoard.vue

@@ -129,7 +129,7 @@
             </div>
           </div>
           <div
-            class="BlogIndexContentRight"
+            class="BlogIndexContentRight messageboard-page"
             style="border: 1px solid #e9e9e9; border-radius: 3px"
           >
             <div
@@ -763,6 +763,12 @@ export default {
       opacity: 0.8;
     }
   }
+
+  .messageboard-page{
+    position: sticky;
+    position: -webkit-sticky;
+    top: 60px;
+  }
 }
 
 /*移动端*/

src/static/css/AboutMe.less

@@ -18,6 +18,9 @@
     width: 25%;
     margin-left: 0.5rem;
     border-radius: 2px;
+    position:sticky;
+    position: -webkit-sticky;
+    top:72px;
   }
   .BigBlock{
     padding: 1rem 1rem 2rem 1rem;

src/static/css/BlogIndex.less

@@ -28,6 +28,12 @@
     width: 25%;
   }
 
+  .blogindex-page{
+    position: sticky;
+    position: -webkit-sticky;
+    top: -200px;
+  }
+
   .ArticleItem{
     margin-top: 1rem;
     background-color: @fore_color;