use scrollpos-styler for revision-toc

src/client/styles/scss/_layout_growi.scss

@@ -19,11 +19,10 @@
   }
 
   .revision-toc {
-    &.affix {
-      top: calc(46px + 5px);
-      min-width: calc(#{100 / 12 * 2%} - #{$grid-gutter-width}); // width of 2column - padding
-      margin-top: 5px;
-    }
+    position: sticky;
+    top: calc(46px + 5px);
+    min-width: calc(#{100 / 12 * 2%} - #{$grid-gutter-width}); // width of 2column - padding
+    margin-top: 5px;
 
     .revision-toc-content {
       padding: 0;

src/client/styles/scss/_layout_kibela.scss

@@ -101,12 +101,11 @@ body.kibela {
   }
 
   .revision-toc {
-    &.affix {
-      top: calc(60px + 5px);
-      right: 10rem;
-      min-width: calc(#{100 / 12 * 2%} - #{$grid-gutter-width}); // width of 2column - padding
-      margin-top: 40px;
-    }
+    position: sticky;
+    top: calc(60px + 5px);
+    right: 10rem;
+    min-width: calc(#{100 / 12 * 2%} - #{$grid-gutter-width}); // width of 2column - padding
+    margin-top: 40px;
 
     .revision-toc-content {
       padding: 0;

src/client/styles/scss/_user_growi.scss

@@ -7,8 +7,7 @@
   }
 
   .revision-toc {
-    &.affix {
-      top: 105px;
-    }
+    position: sticky;
+    top: 105px;
   }
 }

src/server/views/layout-growi/page.html

@@ -27,7 +27,7 @@
     {# relocate #revision-toc #}
     <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
       {% include './widget/liker-and-seenusers.html' %}
-      <div id="revision-toc" class="revision-toc mt-3" data-spy="affix" data-offset-top="123">
+      <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="123">
         <div id="revision-toc-content" class="revision-toc-content"></div>
       </div>
     </div> {# /.col- #}

src/server/views/layout-growi/page_list.html

@@ -27,7 +27,7 @@
     {# relocate #revision-toc #}
     <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
       {% include './widget/liker-and-seenusers.html' %}
-      <div id="revision-toc" class="revision-toc mt-3" data-spy="affix" data-offset-top="123">
+      <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="123">
         <div id="revision-toc-content" class="revision-toc-content"></div>
       </div>
     </div> {# /.col- #}

src/server/views/layout-growi/user_page.html

@@ -51,7 +51,7 @@
           <i class="icon-fw fa fa-paw"></i><span class="seen-user-count">{{ page.seenUsers.length|default(0) }}</span>
         </span>
       </div>
-      <div id="revision-toc" class="revision-toc mt-3" data-spy="affix" data-offset-top="116">
+      <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="116">
         <div id="revision-toc-content" class="revision-toc-content"></div>
       </div>
     </div> {# /.col- #}

src/server/views/layout-kibela/page.html

@@ -23,7 +23,7 @@
 
   </div> {# /.col- #} {# relocate #revision-toc #}
   <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
-    <div id="revision-toc" class="revision-toc affix" data-spy="" data-offset-top="80">
+    <div id="revision-toc" class="revision-toc sps sps--abv" data-sps-offset="80">
       <div id="revision-toc-content" class="revision-toc-content"></div>
     </div>
   </div> {# /.col- #}

src/server/views/layout-kibela/page_list.html

@@ -28,7 +28,7 @@
 
     {# relocate #revision-toc #}
     <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
-      <div id="revision-toc" class="revision-toc affix" data-spy="" data-offset-top="80">
+      <div id="revision-toc" class="revision-toc sps sps--abv" data-sps-offset="80">
         <div id="revision-toc-content" class="revision-toc-content"></div>
       </div>
     </div> {# /.col- #}

src/server/views/layout-kibela/user_page.html

@@ -44,7 +44,7 @@
 
     {# relocate #revision-toc #}
     <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
-      <div id="revision-toc" class="revision-toc affix" data-spy="" data-offset-top="75">
+      <div id="revision-toc" class="revision-toc sps sps--abv" data-sps-offset="75">
         <div id="revision-toc-content" class="revision-toc-content"></div>
       </div>
     </div> {# /.col- #}