Fix affix

jgthms · Nov 9, 2016 · e38acb5 · e38acb5
1 parent 1f36af7
commit e38acb5
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,4 +1,4 @@
-<footer class="page-footer">
+<footer id="footer" class="page-footer">
   <footer class="container">
     <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
       <input type="hidden" name="cmd" value="_s-xclick">

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -18,7 +18,7 @@ <h2>{{ page.subtitle }}</h2>
   <div class="page-content">
     <div class="container">
       <div class="breadcrumb-holder">
-        <header id="breadcrumb" class="breadcrumb" data-spy="affix">
+        <header id="breadcrumb" class="breadcrumb">
           <a id="open" class="breadcrumb-toggle">
             <span></span>
             <span></span>

diff --git a/_sass/elements.sass b/_sass/elements.sass
@@ -113,10 +113,13 @@
   height: 40px
   text-shadow: 0 1px 0 white
   will-change: scroll-position
-
   &.affix
+    position: fixed !important
+  &.affix-bottom
+    position: absolute !important
+  &.affix,
+  &.affix-bottom
     box-shadow: 0 3px 5px rgba(black, .1), 0 1px 0 rgba(black, .1)
-    position: fixed
     top: 0
     width: 100%
     +desktop
@@ -127,7 +130,8 @@
       width: 1140px
   +desktop
     border-radius: 3px 3px 0 0
-    &.affix
+    &.affix,
+    &.affix-bottom
       border-radius: 0
 
 

diff --git a/javascript/post.js b/javascript/post.js
@@ -34,7 +34,12 @@ jQuery(document).ready(function ($) {
 
   $breadcrumb.affix({
     offset: {
-      top: $breadcrumb.offset().top
+      top: $breadcrumb.offset().top,
+      bottom: function () {
+        var newsletterHeight = $('#newsletter').outerHeight(true);
+        var footerHeight = $('#footer').outerHeight(true);
+        return (this.bottom = newsletterHeight + footerHeight);
+      }
     }
   })