[feature] add controls for header position on scroll

src/css/header.css

@@ -1,5 +1,4 @@
 .header {
-  position: relative;
   display: flex;
   flex-direction: row;
   z-index: var(--z-index-header);
@@ -22,11 +21,16 @@
   justify-content: flex-end;
 }
 
-.is-link-show .header {
+.is-link-show.is-header-position-sticky .header {
   position: sticky;
   left: 0;
 }
 
+.is-link-show.is-header-position-inline .header {
+  position: relative;
+  left: 0;
+}
+
 .is-layout-order-headerlink.is-link-show .header {
   top: 0;
 }

src/index.html

@@ -728,6 +728,25 @@
               </div>
             </div>
           </div>
+          <div class="menu-item">
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Position when scrolling</h1>
+            </div>
+            <div class="menu-item-form">
+              <div class="form-indent">
+                <div class="input-wrap">
+                  <input id="control-header-position-sticky" class="control-header-position-sticky" type="radio" name="control-header-position" value="sticky" tabindex="-1">
+                  <label for="control-header-position-sticky">Sticky</label>
+                </div>
+                <p class="control-header-position-sticky-helper form-helper small">Header sticks to the page when scrolling up or down.</p>
+                  <div class="input-wrap">
+                    <input id="control-header-position-inline" class="control-header-position-inline" type="radio" name="control-header-position" value="inline" tabindex="-1">
+                    <label for="control-header-position-inline">Inline</label>
+                  </div>
+                  <p class="control-header-position-inline-helper form-helper small">Header moves inline with the content when scrolling up or down.</p>
+              </div>
+            </div>
+          </div>
           <div class="menu-item">
             <div class="menu-item-header">
               <h1 class="menu-item-header-text">Shade</h1>

src/js/control.js

@@ -1747,6 +1747,20 @@ var control = (function() {
       header.render.border();
       render.class();
     }
+  }, {
+    element: helper.e(".control-header-position-sticky"),
+    path: "header.position",
+    type: "radio",
+    func: function() {
+      render.class();
+    }
+  }, {
+    element: helper.e(".control-header-position-inline"),
+    path: "header.position",
+    type: "radio",
+    func: function() {
+      render.class();
+    }
   }, {
     element: helper.e(".control-link-area-width"),
     path: "link.area.width",
@@ -2649,6 +2663,11 @@ var control = (function() {
           helper.addClass(html, "is-header-border-bottom");
         };
       };
+      var _position = function() {
+        helper.removeClass(html, "is-header-position-sticky");
+        helper.removeClass(html, "is-header-position-inline");
+        helper.addClass(html, "is-header-position-" + state.get().header.position);
+      };
       _area();
       _item();
       _clock();
@@ -2658,6 +2677,7 @@ var control = (function() {
       _shade();
       _border();
       _greeting();
+      _position();
       _transitional();
     };
     var _group = function() {

src/js/state.js

@@ -130,6 +130,7 @@ var state = (function() {
         type: "timeanddate",
         size: 1
       },
+      position: "sticky",
       radius: false
     },
     link: {

src/js/update.js

@@ -624,6 +624,7 @@ var update = (function() {
         name: "Group 1",
         items: data.bookmarks
       }];
+      data.state.header.position = "sticky";
       data.state.group = {
         area: {
           alignment: "left"