Floating Menu to stop before it hits the bottom of the page

Question

I have a floating menu(absolutely positioned) that stays in view as the user scrolls down the page, the problem is i have quite a large footer and if you scroll all the way to the bottom of the page it will clash with the footer.

I just want to make it stop say 400px from the bottom of the page.. Does anyone know if this can be done?

Here is the code:

var name = "#about";  
var menuYloc = null;  

 $(document).ready(function(){  
     menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))  
     $(window).scroll(function () {   
         var offset = menuYloc+$(document).scrollTop()+"px";  
         $(name).animate({top:offset},{duration:500,queue:false});  
     });  
 });

Thanks in advance!

Ryan

Answer 1

Try something like this (untested):

var name = "#about";  
var menuYloc = null;  

$(document).ready(function(){
 var menu = $(name);
 menuYloc = parseInt(menu.css("top").substring(0,menu.css("top").indexOf("px")));
 var height = parseInt( menu.attr( 'offsetHeight' ) + ( parseInt( menu.css( 'marginTop' ) ) || 0 ) + ( parseInt( menu.css( 'marginBottom' ) ) || 0 ) );
 var footerYLoc = $('#footer').offset().top;
 $(window).scroll(function () {   
  var offset = menuYloc+$(document).scrollTop();
  if ( (offset + height) >= footerYloc) offset = footerYloc - height;
  menu.animate({top:offset+"px"},{duration:500,queue:false});  
 });


});