title: Sticky nav bar to bottom of browser window
body: <p>I am trying to create a nav bar that is positioned at the bottom of the browser window when loaded, but as you scroll down sticks to the top of the browser. </p>
  
  <p>It is kind of working on this site <a href="http://thomas-rogers.co.uk/BleepBleeps2/index.html" rel="nofollow">http://thomas-rogers.co.uk/BleepBleeps2/index.html</a> but I can't get the nav bar to be positioned on the bottom of the browser window i.e. it is sometimes not visible depending on screen size etc.</p>
  
  <p>Any help would be greatly appreciated. I just can't get my head around this bit.</p>
  
  <p>Currently I am using this code </p>
  
  <pre><code>            &lt;header&gt;
  &lt;div class="container"&gt;
      &lt;div class="eight columns offset-by-eight" id="logo-box"&gt;
          &lt;h1 class="logo"&gt;BleepBleeps&lt;/h1&gt;
          &lt;h2 class="subheader"&gt;A family of little friends&lt;br&gt;that make parenting easier&lt;/h2&gt;
      &lt;!-- MAILCHIMP SIGNUP --&gt;
          &lt;form action="http://bleepbleeps.us6.list-manage1.com/subscribe/post?u=e6067eec57&amp;amp;id=7e02f5f7e4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate&gt;
              &lt;input type="email" name="EMAIL" placeholder="Your email" class="required email mc-field-group" id="mce-EMAIL"&gt;
              &lt;input type="submit" value="Go" name="subscribe" id="mc-embedded-subscribe" class="tooltip my-custom-theme" title="Sign up to receive amazing Bleep Bleeps content!"&gt;
  
              &lt;div id="mce-responses" class="clear"&gt;
                  &lt;div class="response" id="mce-error-response" style="display:none"&gt;&lt;/div&gt;
                  &lt;div class="response" id="mce-success-response" style="display:none"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;&lt;!-- end MAILCHIMP SIGNUP --&gt;
      &lt;/div&gt;&lt;!-- end logo-box --&gt;
  &lt;/div&gt;&lt;!-- end container --&gt;
  
  &lt;div class="hero"&gt;
      &lt;img class="hero-image" src="images/bb-background2.png" alt="#"&gt;
  &lt;/div&gt;
  
  &lt;nav class="navigation"&gt;
      &lt;div class="container"&gt;
          &lt;img src="images/bb_note.gif" alt="bleepbleeps icon" class="notes"&gt;
              &lt;ul class="socialnav"&gt;
                  &lt;li class="circle-social tw"&gt;&lt;a href="http://twitter.com/BleepBleeps"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="circle-social fb"&gt;&lt;a href="http://www.facebook.com/BleepBleeps"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="circle-social tu"&gt;&lt;a href="http://bleepbleeps.tumblr.com"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="circle-social in"&gt;&lt;a href="http://instagram.com/bleepbleeps"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>             nav {
  width: 100%;
  background: #fff;
  height: 3em;
       }
  
      nav.navigation {
  position: absolute;
  padding-top: 1em;
  width: 100%;
  background: #fff;
  opacity: 0.8;
  bottom: 0;
  z-index: 99;
       }
  
      @media only screen and (max-width: 479px) {
  nav.navigation {
      position: relative !important;
  }
       }
  
      .sticky {
  position: fixed !important;
  top: 0;
       }
  
      .sticky2 {
  position: fixed !important;
  left: 50%;
  margin-left: 10px;
  top: 11px;
       }
  
      @media only screen and (max-width: 767px) {
  .sticky {
  position: relative; !important;
       }
  
  .sticky2 {
      display: none !important;
  }
       }
  
      .notes {
  float:left;
  margin-left: 10px;
       }
  
       var delay = (function(){
  var timer = 0;
  return function(callback, ms){
      clearTimeout (timer);
      timer = setTimeout(callback, ms);
           };
       })();
  
       $(function() {
  
           var pause = 100; // will only process code within delay(function() { ... }) every 100ms.
  
  $(window).resize(function() {
  
      delay(function() {
  
          var width = $(window).width();
  
          $(document).ready(function() {  
              var stickyNavTop = $('.navigation').offset().top;  
  
              var stickyNav = function(){  
              var scrollTop = $(window).scrollTop();  
  
              if  (scrollTop &gt; stickyNavTop + 5) {   
                  $('.navigation').addClass('sticky');  
              } else {  
                  $('.navigation').removeClass('sticky');   
              }  
              };
  
  
              stickyNav();  
  
              $(window).scroll(function() {  
                  stickyNav();  
              });  
              }); 
  
               }, pause );
  
           });
  
           $(window).resize();
  
       });
  
  
       $(document).ready(function() {  
       var stickyNavTop2 = $('#mc-embedded-subscribe-form').offset().top;  
  
       var stickyNav2 = function(){  
       var scrollTop2 = $(window).scrollTop();  
  
       if (scrollTop2 &gt; stickyNavTop2) {   
           $('#mc-embedded-subscribe-form').addClass('sticky2');  
       } else {  
           $('#mc-embedded-subscribe-form').removeClass('sticky2');   
       }  
       };  
  
       stickyNav2();  
  
       $(window).scroll(function() {  
           stickyNav2();  
       });  
       });                 
  </code></pre>