Hide ToC when scrolling to bottom.

_includes/panel.html

@@ -69,13 +69,11 @@
       {% endfor %}
 
       </div> <!-- div.d-flex.flex-wrap -->
-
     </div> <!-- #access-tags -->
-
   </div> <!-- .access -->
 
   {% if page.layout == 'post' and site.toc and page.toc %}
-  <div id="toc-wrap" class="pl-0 pr-4">
+  <div id="toc-wrap" class="pl-0 pr-4 mb-5">
     <h3 data-toc-skip class="pl-3 pt-2">
       {{- site.data.label.panel.toc -}}
     </h3>

_layouts/post.html

@@ -75,6 +75,17 @@ layout: default
         {% endif %}
       </div><!-- div.post-tail -->
 
+    </div> <!-- .post -->
+  </div> <!-- #post-wrap -->
+
+  {% include panel.html %}
+
+</div> <!-- .row -->
+
+<div class="row d-flex justify-content-center bg-white">
+  <div id="post-extend-wrap" class="col-12 col-lg-11 col-xl-8">
+
+    <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
       {% include related-posts.html %}
 
       <div class="post-pager d-flex justify-content-between">
@@ -97,18 +108,13 @@ layout: default
         </a>
       </div> <!-- div.post-pager -->
 
-    </div> <!-- .post -->
-  </div> <!-- #post-wrap -->
-
-  {% include panel.html %}
-
-  <div id="comment-wrap" class="col-12 col-lg-11 col-xl-8">
-    <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
     {% if site.disqus.comments and page.comments %}
       {% include disqus.html %}
     {% endif %}
-    </div>
-  </div>
+
+    </div> <!-- .pl-1 pr-1 -->
+
+  </div> <!-- wrap -->
 
 </div> <!-- .row -->
 

assets/css/main.scss

@@ -352,12 +352,12 @@ body {
   -webkit-transition: transform 0.4s ease;
 }
 
-#main>div.row>div:nth-child(1),
-#main>div.row>div:nth-child(2) {
+#main>div.row:first-child>div:nth-child(1),
+#main>div.row:first-child>div:nth-child(2) {
   margin-top: 3rem; /* same as the height of topbar */
 }
 
-#main>div.row>div:first-child {
+#main>div.row:first-child>div:first-child {
   min-height: calc(100vh - 3rem - 6rem); /* 3rem for topbar, 6rem for footer */
 }
 
@@ -806,7 +806,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
 
 @media all and (max-width: 576px) {
 
-  #main>div.row>div:first-child {
+  #main>div.row:first-child>div:first-child {
     min-height: calc(100vh - 3rem - 10rem); /* topbar is 3rem and footer is 10rem */
   }
 
@@ -969,8 +969,8 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     top: 0 !important;
   }
 
-  #main>div.row>div:nth-child(1),
-  #main>div.row>div:nth-child(2) {
+  #main>div.row:first-child>div:nth-child(1),
+  #main>div.row:first-child>div:nth-child(2) {
     margin-top: 0;
   }
 

assets/css/post.scss

@@ -108,33 +108,33 @@
   right: 1rem;
 }
 
-#comment-wrap {
+#post-extend-wrap {
   min-height: 2rem;
 }
 
 /*
-  The following resposive design aim to make #comment-wrap margin-right same as pannel's width
+  The following resposive design aim to make #post-extend-wrap margin-right same as pannel's width
 */
 @media all and (min-width: 1201px) {
-  #comment-wrap {
+  #post-extend-wrap {
     margin-right: 25%;
   }
 }
 
 @media all and (min-width: 1460px) {
-  #comment-wrap {
+  #post-extend-wrap {
     margin-right: 300px;
   }
 }
 
 @media all and (min-width: 1650px) {
-  #comment-wrap {
+  #post-extend-wrap {
     margin-right: calc((100% - 1150px) / 10 + 300px);
   }
 }
 
 @media all and (min-width: 1700px) {
-  #comment-wrap {
+  #post-extend-wrap {
     margin-right: calc((100% - 1150px) / 8 + 300px);
   }
 }