Javascript Menu Jumping from the bottom up, not scrolling

Question

I am trying to make a menu that adheres to the bottom of the page, and then at the top after scrolling. The only problem is that instead of scrolling the page, the page stays in the same place and then goes to the upper right side at the end.

I also run stellar.js on the site, and I wondered if this was inconsistent, but I removed the calling javascript and the problem remained, so I put it back.

Website URL: www.percolatedpropaganda.co.uk

I'm at a standstill and any help would be greatly appreciated!

Javascript

$(document).ready(function() {
   var windowH = $(window).height();
   var stickToBot = windowH - $('#menu').outerHeight(true);

    $('#menu').css({'top': stickToBot + 'px'});

   $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > stickToBot ) {
            $('#menu').css({'position':'fixed','top' :'0px'});
        } else {
            $('#menu').css({'position':'absolute','top': stickToBot +'px'});
        }
    });
 });

CSS

#menu {
    font-size: 85%;
    position: relative;
    float: left;
}

Answer 1

Why don't you try this:

JavaScript:

$(document).ready(function() {
   $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > 0 ) {
            $('#menu').css({bottom: '', top :'0px'});
        } else {
            $('#menu').css({top: '', bottom: '0px'});
        }
    });
 });

CSS

 #menu {
   position: fixed;
   bottom: 0;
 }

:

UPDATE:
, , :

Javascript:

$(document).ready(function() {
   var menu = $('#menu');
   var windowH = $(window).height();
   var stickToBot = windowH - menu.outerHeight(true);
   menu.css('top', stickToBot + 'px');

    $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
       if ( scrollVal > 0 ) {
            menu.stop().animate({top :'0px'});
        } else {
            menu.stop().animate({top: stickToBot + 'px'});
        }
    });
 });

CSS:

 #menu {
   position: fixed;
 }

:

2:

, cwtchcamping.co.uk... :

JavaScript:

$(document).ready(function() {
   var menu = $('#menu');
   var windowH = $(window).height();
   var stickToBot = windowH - menu.outerHeight(true);
   menu.css('top', stickToBot + 'px');

   $(window).scroll(function() {
     var scrollVal = $(this).scrollTop();
     if (scrollVal > stickToBot) {
       menu.css({top: '0px', position: 'fixed'});
     }
     else {
       menu.css({top: stickToBot + 'px', position: 'absolute'});
     }
   });
 });

CSS:

#menu {
  position: absolute;
}

: JSFiddle