Merge pull request 18F#152 from arichiv-usds/sticky

Add option for sticky subnav to pages

README.md

@@ -226,6 +226,8 @@ redcarpet:
     - with_toc_data
 ```
 
+**Pro tip:** If you're like us and prefer your navigation sticky, you can add `sticky_sidenav: true` on [page](#layout-page), [project](#layout-project), and [team member](#layout-team-member) layouts to have the sidenav follow as you scroll.
+
 ### Color and font configuration
 
 The default colors and fonts can be configured in the `_data/theme.yml` file.

_layouts/page.html

@@ -5,7 +5,7 @@
 ---
 {% assign sidenav = site.data.navigation[page.sidenav] | default: page.sidenav %}
 {% if sidenav %}
-<aside class="usa-layout-docs-sidenav sidenav">
+<aside class="usa-layout-docs-sidenav sidenav {% if page.sticky_sidenav %}usa-sticky-sidenav{% endif %}">
   {% include sidenav.html links=sidenav %}
 </aside>
 

_layouts/project.html

@@ -3,7 +3,7 @@
 ---
 
 
-<aside class="usa-layout-docs-sidenav sidenav">
+<aside class="usa-layout-docs-sidenav sidenav {% if page.sticky_sidenav %}usa-sticky-sidenav{% endif %}">
   <ul class="usa-sidenav-list">
     {% for item in site.projects %}
       <li>

_layouts/team-member.html

@@ -3,7 +3,7 @@
 ---
 
 
-<aside class="usa-layout-docs-sidenav sidenav">
+<aside class="usa-layout-docs-sidenav sidenav {% if page.sticky_sidenav %}usa-sticky-sidenav{% endif %}">
   <ul class="usa-sidenav-list">
     {% for item in site.team %}
       <li>

_sass/components/_side-nav.scss

@@ -1,3 +1,8 @@
+.usa-sticky-sidenav {
+  position: sticky;
+  top: 1rem;
+}
+
 .usa-sidenav-list {
   @if variable-exists(side-nav-bg) {
     background-color: $side-nav-bg;

demo/page.md

@@ -34,4 +34,3 @@ This is some more [content](https://18f.gsa.gov/).
 ###### Section six
 
 This is some more [content](https://18f.gsa.gov/).
-