Closes #339 with a fixed masthead

Author: rjzupkoii

_pages/markdown.md

@@ -258,4 +258,7 @@ Still sticking with science and Isaac Newton's E = MC<sup>2</sup>, which should
 This allows you to denote <var>variables</var>.
 
 ***
-**Footnotes**
+**Footnotes**
+
+The footnotes in the page will be returned following this line, return to the section on <a href="#footnotes">Markdown Footnotes</a>.
+

_sass/_base.scss

@@ -9,7 +9,7 @@ html {
 
 body {
   margin: 0;
-  padding: 0;
+  padding: $masthead-height 0 0;
   padding-bottom: 9em;
   color: $text-color;
   font-family: $global-font-family;

_sass/_masthead.scss

@@ -3,8 +3,13 @@
    ========================================================================== */
 
 .masthead {
-  position: relative;
+  position: fixed;
+  background: white;
   border-bottom: 1px solid $border-color;
+  height: $masthead-height;
+  top: 0;
+  width: 100%;
+
   -webkit-animation: intro 0.3s both;
           animation: intro 0.3s both;
   -webkit-animation-delay: 0.15s;

_sass/_sidebar.scss

@@ -13,6 +13,11 @@
   @include clearfix();
   margin-bottom: 1em;
 
+  @media screen and (min-width: 1024px) {
+    position: fixed;
+    padding-top: $masthead-height;
+  }
+
   @include breakpoint($large) {
     @include span(2 of 12);
     opacity: 1;
@@ -24,7 +29,6 @@
     }
   }
 
-
   @include breakpoint($x-large) {
     padding-right: 0;
   }

_sass/_variables.scss

@@ -42,6 +42,8 @@ $type-size-6                : 0.75em;   // ~12px
 $type-size-7                : 0.6875em; // ~11px
 $type-size-8                : 0.625em;  // ~10px
 
+/* masthead properties */
+$masthead-height            : 50px;
 
 /*
    Colors

assets/js/_main.js

@@ -3,7 +3,7 @@
    ========================================================================== */
 
 $(document).ready(function(){
-   // Sticky footer
+  // Sticky footer
   var bumpIt = function() {
       $("body").css("margin-bottom", $(".page__footer").outerHeight(true));
     },
@@ -28,10 +28,6 @@ $(document).ready(function(){
 
   var stickySideBar = function(){
     var show = $(".author__urls-wrapper button").length === 0 ? $(window).width() > 1024 : !$(".author__urls-wrapper button").is(":visible");
-    // console.log("has button: " + $(".author__urls-wrapper button").length === 0);
-    // console.log("Window Width: " + windowWidth);
-    // console.log("show: " + show);
-    //old code was if($(window).width() > 1024)
     if (show) {
       // fix
       Stickyfill.rebuild();
@@ -51,26 +47,19 @@ $(document).ready(function(){
   });
 
   // Follow menu drop down
-
   $(".author__urls-wrapper button").on("click", function() {
     $(".author__urls").fadeToggle("fast", function() {});
     $(".author__urls-wrapper button").toggleClass("open");
   });
 
-  // init smooth scroll
-  $("a").smoothScroll({offset: -20});
+  // init smooth scroll, this needs to be slightly more than then fixed masthead height
+  $("a").smoothScroll({offset: -65});
 
   // add lightbox class to all image links
   $("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.JPG'],a[href$='.png'],a[href$='.gif']").addClass("image-popup");
 
   // Magnific-Popup options
   $(".image-popup").magnificPopup({
-    // disableOn: function() {
-    //   if( $(window).width() < 500 ) {
-    //     return false;
-    //   }
-    //   return true;
-    // },
     type: 'image',
     tLoading: 'Loading image #%curr%...',
     gallery: {