diff --git a/_includes/scripts/lib/affix.js b/_includes/scripts/lib/affix.js
index 899f6003255..a49fcf4b695 100644
--- a/_includes/scripts/lib/affix.js
+++ b/_includes/scripts/lib/affix.js
@@ -1,26 +1,33 @@
 (function() {
   var SOURCES = window.TEXT_VARIABLES.sources;
   window.Lazyload.js(SOURCES.jquery, function() {
-    var $window = $(window), $document = $(window.document), $root;
+    var $window = $(window), $root, $scrollTarget, $scroller, $scroll;
     var rootTop, rootLeft, rootHeight, scrollBottom, rootBottomTop, lastScrollTop;
-    var offsetBottom = 0, disabled = false, hasInit = false;
+    var offsetBottom = 0, disabled = false, scrollTarget = window, scroller = 'html, body', scroll = window.document;
+    var hasInit = false, isOverallScroller = true;
 
     function setOptions(options) {
       var _options = options || {};
       _options.offsetBottom && (offsetBottom = _options.offsetBottom);
+      _options.scrollTarget && (scrollTarget = _options.scrollTarget);
+      _options.scroller && (scroller = _options.scroller);
+      _options.scroll && (scroll = _options.scroll);
       _options.disabled !== undefined && (disabled = _options.disabled);
+      $scrollTarget = $(scrollTarget);
+      $scroller = $(scroller);
+      isOverallScroller = window.isOverallScroller($scroller[0]);
+      $scroll = $(scroll);
       calc(true);
     }
     function initData() {
       top();
-      var rootOffset = $root.offset();
       rootHeight = $root.outerHeight();
-      rootTop = rootOffset.top;
-      rootLeft = rootOffset.left;
+      rootTop = $root.offset().top + (isOverallScroller ? 0 :  $scroller.scrollTop());
+      rootLeft = $root.offset().left;
     }
     function calc(needInitData) {
       needInitData && initData();
-      scrollBottom = $document.outerHeight() - offsetBottom - rootHeight;
+      scrollBottom = $scroll.outerHeight() - offsetBottom - rootHeight;
       rootBottomTop = scrollBottom - rootTop;
     }
     function top() {
@@ -43,7 +50,7 @@
     }
     function setState(force) {
       force !== true && (force = false);
-      var scrollTop = $window.scrollTop();
+      var scrollTop = $scrollTarget.scrollTop();
       if (scrollTop >= rootTop && scrollTop <= scrollBottom) {
         (!force && lastScrollTop >= rootTop && lastScrollTop <= scrollBottom) || fixed();
       } else if (scrollTop < rootTop) {
@@ -68,7 +75,7 @@
           clearInterval(interval);
           clearTimeout(timeout);
         });
-        $window.on('scroll', function() {
+        $scrollTarget.on('scroll', function() {
           disabled || setState();
         });
         $window.on('resize', window.throttle(function() {
diff --git a/_includes/scripts/lib/scroll.js b/_includes/scripts/lib/scroll.js
new file mode 100644
index 00000000000..5970aae7088
--- /dev/null
+++ b/_includes/scripts/lib/scroll.js
@@ -0,0 +1,13 @@
+(function() {
+  var SOURCES = window.TEXT_VARIABLES.sources;
+  window.Lazyload.js(SOURCES.jquery, function() {
+    function scrollToAnchor(anchor, duration, callback) {
+      var $root = this;
+      $root.animate({ scrollTop: $(anchor).position().top }, duration, function() {
+        window.history.replaceState(null, '', window.location.href.split('#')[0] + anchor);
+        callback && callback();
+      });
+    }
+    $.fn.scrollToAnchor = scrollToAnchor;
+  });
+})();
\ No newline at end of file
diff --git a/_includes/scripts/lib/toc.js b/_includes/scripts/lib/toc.js
index 21b8932cef9..2494cb4011d 100644
--- a/_includes/scripts/lib/toc.js
+++ b/_includes/scripts/lib/toc.js
@@ -1,25 +1,29 @@
 (function() {
   var SOURCES = window.TEXT_VARIABLES.sources;
   window.Lazyload.js(SOURCES.jquery, function() {
-    var $window = $(window), $root, $tocUl = $('<ul class="toc"></ul>'), $tocLi, $headings, $activeLast, $activeCur;
-    var selectors = 'h1,h2,h3', container = 'body', disabled = false;
+    var $window = $(window), $root, $scrollTarget, $scroller, $tocUl = $('<ul class="toc"></ul>'), $tocLi, $headings, $activeLast, $activeCur;
+    var selectors = 'h1,h2,h3', container = 'body', scrollTarget = window, scroller = 'html, body', disabled = false;
     var headingsPos, scrolling = false, rendered = false, hasInit = false;
     function setOptions(options) {
       var _options = options || {};
       _options.selectors && (selectors = _options.selectors);
       _options.container && (container = _options.container);
+      _options.scrollTarget && (scrollTarget = _options.scrollTarget);
+      _options.scroller && (scroller = _options.scroller);
       _options.disabled !== undefined && (disabled = _options.disabled);
       $headings = $(container).find(selectors);
+      $scrollTarget = $(scrollTarget);
+      $scroller = $(scroller);
       calc();
     }
     function calc() {
       headingsPos = [];
       $headings.each(function() {
-        headingsPos.push(Math.floor($(this).offset().top));
+        headingsPos.push(Math.floor($(this).position().top));
       });
     }
     function setState(element, disabled) {
-      var scrollTop = $window.scrollTop(), i;
+      var scrollTop = $scroller.scrollTop(), i;
       if (disabled || !headingsPos || headingsPos.length < 1) { return; }
       if (element) {
         $activeCur = element;
@@ -50,7 +54,7 @@
           var $this = $(this);
           scrolling = true;
           setState($this.parent());
-          window.scrollTopAnchor($this.attr('href'), function() {
+          $scroller.scrollToAnchor($this.attr('href'), 400, function() {
             scrolling = false;
           });
         });
@@ -72,7 +76,7 @@
           clearInterval(interval);
           clearTimeout(timeout);
         });
-        $window.on('scroll', function() {
+        $scrollTarget.on('scroll', function() {
           disabled || setState(null, scrolling);
         });
         $window.on('resize', window.throttle(function() {
diff --git a/_includes/scripts/page-post-common.js b/_includes/scripts/page-post-common.js
index 0e25e3f0b63..fd63522411c 100644
--- a/_includes/scripts/page-post-common.js
+++ b/_includes/scripts/page-post-common.js
@@ -1,18 +1,10 @@
 (function() {
   var SOURCES = window.TEXT_VARIABLES.sources;
-  function scrollAnimateTo(destination, duration, callback) {
-    var $body = $('html, body'), bodyScrollTop = $body.scrollTop();
-    if(bodyScrollTop === destination) { return; }
-    $body.animate({ scrollTop: destination }, duration, callback);
-  }
-  window.scrollTopAnchor = function(anchor, callback) {
-    scrollAnimateTo($(anchor).offset().top, 400, function() {
-      window.history.replaceState(null, '', window.location.href.split('#')[0] + anchor);
-      callback && callback();
-    });
-  };
   window.Lazyload.js(SOURCES.jquery, function() {
-    var $articleContent = $('.article-content'), $this;
+    var $this, $articleContent = $('.article-content'), $scroll;
+    var hasSidebar = $('.js-page-root').hasClass('layout--page--sidebar');
+    var scroll = hasSidebar ? '.js-page-main' : 'html, body';
+    $scroll = $(scroll);
     $articleContent.children('.highlight').each(function() {
       $this = $(this);
       $this.attr('data-lang', $this.find('code').attr('data-lang'));
@@ -23,7 +15,7 @@
       $this.append($('<a class="anchor" aria-hidden="true"></a>').html('<i class="fas fa-anchor"></i>'));
     });
     $articleContent.on('click', '.anchor', function() {
-      window.scrollTopAnchor('#' + $(this).parent().attr('id'));
+      $scroll.scrollToAnchor('#' + $(this).parent().attr('id'), 400);
     });
   });
 })();
\ No newline at end of file
diff --git a/_includes/scripts/post.js b/_includes/scripts/post.js
index db1bea3ec55..95aaf789309 100644
--- a/_includes/scripts/post.js
+++ b/_includes/scripts/post.js
@@ -10,6 +10,7 @@
     var $tocRoot = $('.js-toc-root');
     var $col2 = $('.js-col-2');
     var toc, affix;
+    var hasSidebar = $('.js-page-root').hasClass('layout--page--sidebar');
     var hasToc = $articleContent.find(TOC_SELECTOR).length > 0;
     var tocDisabled = false;
 
@@ -36,10 +37,15 @@
       toc = $tocRoot.toc({
         selectors: TOC_SELECTOR,
         container: $articleContent,
+        scrollTarget: hasSidebar ? '.js-page-main' : null,
+        scroller: hasSidebar ? '.js-page-main' : null,
         disabled: tocDisabled
       });
       affix = $articleAside.affix({
         offsetBottom: $pageFooter.outerHeight(),
+        scrollTarget: hasSidebar ? '.js-page-main' : null,
+        scroller: hasSidebar ? '.js-page-main' : null,
+        scroll: hasSidebar ? $('.js-page-main').children() : null,
         disabled: tocDisabled
       });
     }, 1000);
diff --git a/_includes/scripts/utils.js b/_includes/scripts/utils.js
index 6c9cc724648..368f1d15058 100644
--- a/_includes/scripts/utils.js
+++ b/_includes/scripts/utils.js
@@ -10,10 +10,15 @@
     return str ? decodeURIComponent(str.replace(/\+/g, '%20')) : '';
   };
 
+
   window.hasEvent = function(event) {
     return 'on'.concat(event) in window.document;
   };
 
+  window.isOverallScroller = function(node) {
+    return node === document.documentElement || node === document.body;
+  };
+
   window.pageLoad = (function () {
     var loaded = false, cbs = [];
     window.addEventListener('load', function () {
diff --git a/_layouts/page-1.html b/_layouts/page-1.html
new file mode 100644
index 00000000000..40b22664b4a
--- /dev/null
+++ b/_layouts/page-1.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+{%- include snippets/get-lang.html -%}
+<html lang="{{ __return }}">
+  <head>
+    {%- include head.html -%}
+    <script>
+      {%- include scripts/utils.js -%}
+      {%- include scripts/lib/throttle.js -%}
+      {%- include scripts/lib/lazyload.js -%}
+      {%- include scripts/common.js -%}
+    </script>
+    {%- include scripts/variables.html -%}
+          <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+  <body>
+    {%- if page.sidebar -%}
+    <div class="layout--page layout--page--sidebar clearfix js-page-root">
+      <div class="page__actions">
+        <div class="button button--secondary button--circle box-shadow-2 js-sidebar-button">
+          <i class="fas fa-bars icon--show"></i>
+          <i class="fas fa-times icon--hide"></i>
+        </div>
+      </div>
+      <div class="page__sidebar">{%- include sidebar.html -%}</div>
+      <script>
+        (function() {
+          var SOURCES = window.TEXT_VARIABLES.sources;
+          var TOC_SELECTOR = window.TEXT_VARIABLES.site.toc.selectors;
+          window.Lazyload.js(SOURCES.jquery, function() {
+            var $pageRoot = $('.js-page-root');
+            var $sidebarButton = $('.js-sidebar-button');
+            $sidebarButton.on('click', function() {
+              $pageRoot.toggleClass('show-sidebar');
+            });
+          });
+        })();
+      </script>
+
+    {%- else -%}
+    <div class="layout--page clearfix js-layout-base-2-col">
+    {%- endif -%}
+      <div class="page__main js-page-main">
+        <div class="page__main-inner">
+          <div class="page__header">{%- include header.html -%}</div>
+
+          <div class="page__content">
+            <div class ="main">
+              <div class="col-2 js-col-2">
+                <aside class="js-article-aside"><div class="js-toc-root"></div></aside>
+              </div>
+
+              <div class="col-1">
+                <article>
+
+                  {%- include snippets/page-title.html -%}
+                  <div class="main__header"><h1>{{ __return }}</h1></div>
+
+                  <div class="article-content  js-article-content" itemprop="articleBody">{{ content }}</div>
+
+                  {%- if jekyll.environment != "development" and page.comment != false -%}
+                    <section>{%- include comment.html -%}</section>
+                  {%- endif -%}
+
+                </article>
+              </div>
+            </div>
+          </div>
+          <div class="page__footer">{%- include footer.html -%}</div>
+
+        </div>
+      </div>
+    </div>
+    <script>
+      {%- include scripts/lib/scroll.js -%}
+      {%- include scripts/page-post-common.js -%}
+      {%- include scripts/page.js -%}
+      {%- include scripts/lib/affix.js -%}
+      {%- include scripts/lib/toc.js -%}
+      {%- include scripts/post.js -%}
+    </script>
+
+
+    {%- include markdown-enhancements.html -%}
+    {%- include pageview.html -%}
+    {%- include analytics.html -%}
+  </body>
+</html>
\ No newline at end of file
diff --git a/_sass/layout/_page.scss b/_sass/layout/_page.scss
new file mode 100644
index 00000000000..358103399b6
--- /dev/null
+++ b/_sass/layout/_page.scss
@@ -0,0 +1,122 @@
+.layout--page {
+  height: 100%;
+
+  .page__sidebar {
+    display: block;
+    width: 100%;
+    max-width: map-get($layout, sidebar-width);
+    float: left;
+    height: 100%;
+    -webkit-overflow-scrolling: touch;
+    overflow: auto;
+    background-color: $background-color;
+    z-index: 1;
+    @include split-line(right);
+    @include transition(transform .4s);
+  }
+
+  &.layout--page--sidebar {
+    .page__main {
+      height: 100%;
+      -webkit-overflow-scrolling: touch;
+      overflow: auto;
+    }
+  }
+
+  .page__main-inner {
+    position: relative;
+    height: auto !important;
+    height: 100%;
+    min-height: 100%;
+
+    .col-2 {
+      display: none;
+      float: right;
+      & > aside {
+        box-sizing: border-box;
+        width: map-get($layout, aside-width);
+        position: absolute;
+        overflow: hidden;
+      }
+      @include media-breakpoint-down(lg) {
+        float: none;
+      }
+    }
+  }
+
+  .has-toc {
+    .page__main-inner{
+      .col-1 {
+        margin-right: map-get($layout, aside-width);
+        @include media-breakpoint-down(lg) {
+          margin-right: 0;
+        }
+      }
+      .col-2 {
+        width: map-get($layout, aside-width);
+        position: relative;
+        display: block;
+        &>aside {
+          &.fixed {
+            position: fixed;
+            z-index: 2;
+            -webkit-font-smoothing: subpixel-antialiased;
+          }
+        }
+        @include media-breakpoint-down(lg) {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .page__content {
+    margin: 0 auto;
+    padding-bottom: map-get($layout, footer-height);
+  }
+
+  .page__footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+
+  .page__actions {
+    position: absolute;
+    left: 1rem;
+    bottom: 1rem;
+    display: none;
+    z-index: 999;
+  }
+
+  @include media-breakpoint-down(lg) {
+    .page__sidebar {
+      position: fixed;
+      @include transform(translate(- map-get($layout, sidebar-width), 0));
+    }
+
+    .page__actions {
+      display: block;
+    }
+
+    .icon--show {
+      display: inline;
+    }
+    .icon--hide {
+      display: none;
+    }
+
+    &.show-sidebar {
+      .page__sidebar {
+        @include transform(translate(0));
+      }
+
+      .icon--show {
+        display: none;
+      }
+      .icon--hide {
+        display: inline;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/_sass/layout/_post.scss b/_sass/layout/_post.scss
index 6521788151d..6240699cec1 100644
--- a/_sass/layout/_post.scss
+++ b/_sass/layout/_post.scss
@@ -65,7 +65,7 @@
       width: map-get($layout, aside-width);
       position: relative;
       display: block;
-      &>aside {
+      & > aside {
         &.fixed {
           position: fixed;
           z-index: 2;
diff --git a/assets/css/blog.scss b/assets/css/blog.scss
index 5e37c91d082..bc3002d24f0 100644
--- a/assets/css/blog.scss
+++ b/assets/css/blog.scss
@@ -41,6 +41,7 @@
     "layout/base-2-col",
     "layout/home",
     "layout/all",
+    "layout/page",
     "layout/post",
     "layout/error-404"
 ;
diff --git a/docs/en/1.1-quick-start.md b/docs/en/1.1-quick-start.md
index af6faa0cf2f..85e94796636 100644
--- a/docs/en/1.1-quick-start.md
+++ b/docs/en/1.1-quick-start.md
@@ -1,5 +1,5 @@
 ---
-layout: page-2-col
+layout: page-1
 title: 'Quick Start'
 permalink: /docs/en/quick-start
 key: 20180501
diff --git a/test/_posts/2017-08-08-additional-styles.md b/test/_posts/2017-08-08-additional-styles.md
index 32634b2ca67..5defc42728a 100644
--- a/test/_posts/2017-08-08-additional-styles.md
+++ b/test/_posts/2017-08-08-additional-styles.md
@@ -1,5 +1,5 @@
 ---
-layout: post
+layout: page-1
 title: TeXt - Additional Styles
 key: 20170808
 tags: