[feature] add controls for header position on scroll

Author: zombieFox

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 @@ <h1 class="menu-item-header-text">Border</h1>
 </div>
 </div>
 </div>
+<divclass="menu-item">
+<divclass="menu-item-header">
+<h1class="menu-item-header-text">Position when scrolling</h1>
+</div>
+<divclass="menu-item-form">
+<divclass="form-indent">
+<divclass="input-wrap">
+<inputid="control-header-position-sticky" class="control-header-position-sticky" type="radio" name="control-header-position" value="sticky" tabindex="-1">
+<labelfor="control-header-position-sticky">Sticky</label>
+</div>
+<pclass="control-header-position-sticky-helper form-helper small">Header sticks to the page when scrolling up or down.</p>
+<divclass="input-wrap">
+<inputid="control-header-position-inline" class="control-header-position-inline" type="radio" name="control-header-position" value="inline" tabindex="-1">
+<labelfor="control-header-position-inline">Inline</label>
+</div>
+<pclass="control-header-position-inline-helper form-helper small">Header moves inline with the content when scrolling up or down.</p>
+</div>
+</div>
+</div>
 <divclass="menu-item">
 <divclass="menu-item-header">
 <h1class="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"