Use position:sticky instead of javascript (#177)

* Use position:sticky instead of javascript

This make the fixed navbar a lot less distracting,
makes the page feel faster,
and more efficient.

* Add a fallback for browsers that don't support sticky

There's no animation,
and it still uses sticky on browsers that support both
`position:sticky` and `@supports`

* Fix extra layout pages

* Update nav.html

* Update nav.html

Co-authored-by: Guillermo Guerrero Ibarra <wolf.fox1985@gmail.com>

15 files changed, 128 insertions, 171 deletions

diff --git a/layouts/404.html b/layouts/404.html
index 43d3ef1..dffac47 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -7,11 +7,7 @@
 
     <div id="all">
 
-        <header>
-
-          {{ partial "nav.html" . }}
-
-        </header>
+        {{ partial "nav.html" . }}
 
         <div id="content">
             <div class="container">
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 1c15091..201388b 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -7,11 +7,7 @@
 
     <div id="all">
 
-        <header>
-
-          {{ partial "nav.html" . }}
-
-        </header>
+        {{ partial "nav.html" . }}
 
         {{ partial "breadcrumbs.html" . }}
 
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index eff822f..29f2dd0 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -7,11 +7,7 @@
 
     <div id="all">
 
-        <header>
-
-          {{ partial "nav.html" . }}
-
-        </header>
+        {{ partial "nav.html" . }}
 
         {{ partial "breadcrumbs.html" . }}
 
diff --git a/layouts/index.html b/layouts/index.html
index fac2cb5..43151ff 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -7,13 +7,9 @@
 
     <div id="all">
 
-        <header>
+        {{ partial "top.html" . }}
 
-          {{ partial "top.html" . }}
-
-          {{ partial "nav.html" . }}
-
-        </header>
+        {{ partial "nav.html" . }}
 
         {{ partial "carousel.html" . }}
 
diff --git a/layouts/page/single.html b/layouts/page/single.html
index 4121d0b..28b4426 100644
--- a/layouts/page/single.html
+++ b/layouts/page/single.html
@@ -7,11 +7,7 @@
 
     <div id="all">
 
-        <header>
-
-          {{ partial "nav.html" . }}
-
-        </header>
+        {{ partial "nav.html" . }}
 
         {{ partial "breadcrumbs.html" . }}
 
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index a9736a1..05e9ce3 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -1,7 +1,5 @@
-<div class="navbar-affixed-top" data-spy="affix" data-offset-top="200">
-
-    <div class="navbar navbar-default yamm" role="navigation" id="navbar">
-
+<header class="navbar-affixed-top" data-spy="affix" data-offset-top="62">
+    <div class="navbar navbar-default yamm" role="navigation" id="navbar">    
         <div class="container">
             <div class="navbar-header">
                 <a class="navbar-brand home" href="{{ "/" | relURL }}">
@@ -40,26 +38,19 @@
             </div>
             <!--/.nav-collapse -->
 
-            <div class="collapse clearfix" id="search">
-
+            <div class="collapse clearfix" id="search">    
                 <form class="navbar-form" role="search">
                     <div class="input-group">
                         <input type="text" class="form-control" placeholder="Search">
                         <span class="input-group-btn">
-
                     <button type="submit" class="btn btn-template-main"><i class="fas fa-search"></i></button>
-
                 </span>
                     </div>
                 </form>
-
             </div>
             <!--/.nav-collapse -->
-
         </div>
     </div>
-    <!-- /#navbar -->
-
-</div>
+</header>
 
 <!-- *** NAVBAR END ***-->
diff --git a/layouts/partials/top.html b/layouts/partials/top.html
index 441944b..fd4b7a9 100644
--- a/layouts/partials/top.html
+++ b/layouts/partials/top.html
@@ -1,18 +1,20 @@
 {{ if .Site.Params.topbar.enable }}
-<div id="top">
-  <div class="container">
-    <div class="row">
-      <div class="col-xs-5">
-        {{ .Site.Params.topbar.text | safeHTML }}
-      </div>
-      <div class="col-xs-7">
-        <div class="social">
-          {{ range .Site.Menus.topbar.ByWeight }}
-          <a href="{{ .URL }}" target="_blank" style="opacity: 1;">{{ .Pre }}</a>
-          {{ end }}
+<header>
+  <div id="top">
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-5">
+          {{ .Site.Params.topbar.text | safeHTML }}
+        </div>
+        <div class="col-xs-7">
+          <div class="social">
+            {{ range .Site.Menus.topbar.ByWeight }}
+            <a href="{{ .URL }}" target="_blank" style="opacity: 1;">{{ .Pre }}</a>
+            {{ end }}
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</header>
 {{ end }}
diff --git a/static/css/style.blue.css b/static/css/style.blue.css
index 697579b..7b60924 100644
--- a/static/css/style.blue.css
+++ b/static/css/style.blue.css
@@ -476,26 +476,24 @@ ul.list-style-none {
   margin-left: 7px;
 }
 .navbar-affixed-top {
-  top: -32px;
-}
-.navbar-affixed-top.affix-top {
-  -webkit-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
-}
-.navbar-affixed-top.affix {
-  position: fixed;
-  width: 100%;
   top: 0;
   z-index: 1000;
+  width: 100%;
+}
+.navbar-affixed-top.affix {
   -webkit-box-shadow: 0 0 5px #cccccc;
   box-shadow: 0 0 5px #cccccc;
-  -webkit-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
 }
-body.boxed .navbar-affixed-top.affix {
-  position: static;
+.navbar-affixed-top.affix + section {
+  margin-top: 62px;
+}
+@supports (position: sticky) {
+  .navbar-affixed-top {
+    position: sticky;
+  }
+  .navbar-affixed-top.affix + section {
+    margin-top: 0;
+  }
 }
 #login-modal {
   overflow: hidden;
diff --git a/static/css/style.default.css b/static/css/style.default.css
index 0c72d1b..c38bf63 100644
--- a/static/css/style.default.css
+++ b/static/css/style.default.css
@@ -476,26 +476,24 @@ ul.list-style-none {
   margin-left: 7px;
 }
 .navbar-affixed-top {
-  top: -32px;
-}
-.navbar-affixed-top.affix-top {
-  -webkit-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
-}
-.navbar-affixed-top.affix {
-  position: fixed;
-  width: 100%;
   top: 0;
   z-index: 1000;
+  width: 100%;
+}
+.navbar-affixed-top.affix {
   -webkit-box-shadow: 0 0 5px #cccccc;
   box-shadow: 0 0 5px #cccccc;
-  -webkit-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
 }
-body.boxed .navbar-affixed-top.affix {
-  position: static;
+.navbar-affixed-top.affix + section {
+  margin-top: 62px;
+}
+@supports (position: sticky) {
+  .navbar-affixed-top {
+    position: sticky;
+  }
+  .navbar-affixed-top.affix + section {
+    margin-top: 0;
+  }
 }
 #login-modal {
   overflow: hidden;
diff --git a/static/css/style.green.css b/static/css/style.green.css
index cf1a5ee..2ba3244 100644
--- a/static/css/style.green.css
+++ b/static/css/style.green.css
@@ -476,26 +476,24 @@ ul.list-style-none {
   margin-left: 7px;
 }
 .navbar-affixed-top {
-  top: -32px;
-}
-.navbar-affixed-top.affix-top {
-  -webkit-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
-}
-.navbar-affixed-top.affix {
-  position: fixed;
-  width: 100%;
   top: 0;
   z-index: 1000;
+  width: 100%;
+}
+.navbar-affixed-top.affix {
   -webkit-box-shadow: 0 0 5px #cccccc;
   box-shadow: 0 0 5px #cccccc;
-  -webkit-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
 }
-body.boxed .navbar-affixed-top.affix {
-  position: static;
+.navbar-affixed-top.affix + section {
+  margin-top: 62px;
+}
+@supports (position: sticky) {
+  .navbar-affixed-top {
+    position: sticky;
+  }
+  .navbar-affixed-top.affix + section {
+    margin-top: 0;
+  }
 }
 #login-modal {
   overflow: hidden;
diff --git a/static/css/style.marsala.css b/static/css/style.marsala.css
index 08af88a..aced26f 100644
--- a/static/css/style.marsala.css
+++ b/static/css/style.marsala.css
@@ -476,26 +476,24 @@ ul.list-style-none {
   margin-left: 7px;
 }
 .navbar-affixed-top {
-  top: -32px;
-}
-.navbar-affixed-top.affix-top {
-  -webkit-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
-}
-.navbar-affixed-top.affix {
-  position: fixed;
-  width: 100%;
   top: 0;
   z-index: 1000;
+  width: 100%;
+}
+.navbar-affixed-top.affix {
   -webkit-box-shadow: 0 0 5px #cccccc;
   box-shadow: 0 0 5px #cccccc;
-  -webkit-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
 }
-body.boxed .navbar-affixed-top.affix {
-  position: static;
+.navbar-affixed-top.affix + section {
+  margin-top: 62px;
+}
+@supports (position: sticky) {
+  .navbar-affixed-top {
+    position: sticky;
+  }
+  .navbar-affixed-top.affix + section {
+    margin-top: 0;
+  }
 }
 #login-modal {
   overflow: hidden;
diff --git a/static/css/style.pink.css b/static/css/style.pink.css
index b5faa8f..6166b6a 100644
--- a/static/css/style.pink.css
+++ b/static/css/style.pink.css
@@ -476,26 +476,24 @@ ul.list-style-none {
   margin-left: 7px;
 }
 .navbar-affixed-top {
-  top: -32px;
-}
-.navbar-affixed-top.affix-top {
-  -webkit-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
-}
-.navbar-affixed-top.affix {
-  position: fixed;
-  width: 100%;
   top: 0;
   z-index: 1000;
+  width: 100%;
+}
+.navbar-affixed-top.affix {
   -webkit-box-shadow: 0 0 5px #cccccc;
   box-shadow: 0 0 5px #cccccc;
-  -webkit-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
 }
-body.boxed .navbar-affixed-top.affix {
-  position: static;
+.navbar-affixed-top.affix + section {
+  margin-top: 62px;
+}
+@supports (position: sticky) {
+  .navbar-affixed-top {
+    position: sticky;
+  }
+  .navbar-affixed-top.affix + section {
+    margin-top: 0;
+  }
 }
 #login-modal {
   overflow: hidden;
diff --git a/static/css/style.red.css b/static/css/style.red.css
index cf4710f..a6f9305 100644
--- a/static/css/style.red.css
+++ b/static/css/style.red.css
@@ -476,26 +476,24 @@ ul.list-style-none {
   margin-left: 7px;
 }
 .navbar-affixed-top {
-  top: -32px;
-}
-.navbar-affixed-top.affix-top {
-  -webkit-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
-}
-.navbar-affixed-top.affix {
-  position: fixed;
-  width: 100%;
   top: 0;
   z-index: 1000;
+  width: 100%;
+}
+.navbar-affixed-top.affix {
   -webkit-box-shadow: 0 0 5px #cccccc;
   box-shadow: 0 0 5px #cccccc;
-  -webkit-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
 }
-body.boxed .navbar-affixed-top.affix {
-  position: static;
+.navbar-affixed-top.affix + section {
+  margin-top: 62px;
+}
+@supports (position: sticky) {
+  .navbar-affixed-top {
+    position: sticky;
+  }
+  .navbar-affixed-top.affix + section {
+    margin-top: 0;
+  }
 }
 #login-modal {
   overflow: hidden;
diff --git a/static/css/style.turquoise.css b/static/css/style.turquoise.css
index cfdc204..73faa8c 100644
--- a/static/css/style.turquoise.css
+++ b/static/css/style.turquoise.css
@@ -476,26 +476,24 @@ ul.list-style-none {
   margin-left: 7px;
 }
 .navbar-affixed-top {
-  top: -32px;
-}
-.navbar-affixed-top.affix-top {
-  -webkit-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
-}
-.navbar-affixed-top.affix {
-  position: fixed;
-  width: 100%;
   top: 0;
   z-index: 1000;
+  width: 100%;
+}
+.navbar-affixed-top.affix {
   -webkit-box-shadow: 0 0 5px #cccccc;
   box-shadow: 0 0 5px #cccccc;
-  -webkit-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
 }
-body.boxed .navbar-affixed-top.affix {
-  position: static;
+.navbar-affixed-top.affix + section {
+  margin-top: 62px;
+}
+@supports (position: sticky) {
+  .navbar-affixed-top {
+    position: sticky;
+  }
+  .navbar-affixed-top.affix + section {
+    margin-top: 0;
+  }
 }
 #login-modal {
   overflow: hidden;
diff --git a/static/css/style.violet.css b/static/css/style.violet.css
index e71222f..1303e23 100644
--- a/static/css/style.violet.css
+++ b/static/css/style.violet.css
@@ -476,26 +476,24 @@ ul.list-style-none {
   margin-left: 7px;
 }
 .navbar-affixed-top {
-  top: -32px;
-}
-.navbar-affixed-top.affix-top {
-  -webkit-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
-}
-.navbar-affixed-top.affix {
-  position: fixed;
-  width: 100%;
   top: 0;
   z-index: 1000;
+  width: 100%;
+}
+.navbar-affixed-top.affix {
   -webkit-box-shadow: 0 0 5px #cccccc;
   box-shadow: 0 0 5px #cccccc;
-  -webkit-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
 }
-body.boxed .navbar-affixed-top.affix {
-  position: static;
+.navbar-affixed-top.affix + section {
+  margin-top: 62px;
+}
+@supports (position: sticky) {
+  .navbar-affixed-top {
+    position: sticky;
+  }
+  .navbar-affixed-top.affix + section {
+    margin-top: 0;
+  }
 }
 #login-modal {
   overflow: hidden;