Sticky nav bar to bottom of browser window

Question

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.

It is kind of working on this site http://thomas-rogers.co.uk/BleepBleeps2/index.html 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.

Any help would be greatly appreciated. I just can't get my head around this bit.

Currently I am using this code

            <header>
<div class="container">
    <div class="eight columns offset-by-eight" id="logo-box">
        <h1 class="logo">BleepBleeps</h1>
        <h2 class="subheader">A family of little friends<br>that make parenting easier</h2>
    <!-- MAILCHIMP SIGNUP -->
        <form action="http://bleepbleeps.us6.list-manage1.com/subscribe/post?u=e6067eec57&amp;id=7e02f5f7e4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
            <input type="email" name="EMAIL" placeholder="Your email" class="required email mc-field-group" id="mce-EMAIL">
            <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!">

            <div id="mce-responses" class="clear">
                <div class="response" id="mce-error-response" style="display:none"></div>
                <div class="response" id="mce-success-response" style="display:none"></div>
            </div>
        </form><!-- end MAILCHIMP SIGNUP -->
    </div><!-- end logo-box -->
</div><!-- end container -->

<div class="hero">
    <img class="hero-image" src="images/bb-background2.png" alt="#">
</div>

<nav class="navigation">
    <div class="container">
        <img src="images/bb_note.gif" alt="bleepbleeps icon" class="notes">
            <ul class="socialnav">
                <li class="circle-social tw"><a href="http://twitter.com/BleepBleeps"></a></li>
                <li class="circle-social fb"><a href="http://www.facebook.com/BleepBleeps"></a></li>
                <li class="circle-social tu"><a href="http://bleepbleeps.tumblr.com"></a></li>
                <li class="circle-social in"><a href="http://instagram.com/bleepbleeps"></a></li>
            </ul>
    </div>
</nav>

             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 > 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 > stickyNavTop2) {   
         $('#mc-embedded-subscribe-form').addClass('sticky2');  
     } else {  
         $('#mc-embedded-subscribe-form').removeClass('sticky2');   
     }  
     };  

     stickyNav2();  

     $(window).scroll(function() {  
         stickyNav2();  
     });  
     });                 

Answer 1

You can use jQuery to do it.

Something like...

$('.navigation').css('top',$(window).height()-50);

You might want to subtract some pixels like the 50 so that it moves it up into the view of the user.