CODEWITHSUNDEEP
javascriptjqueryscroll
Ryan
Ryan

Reputation: 1184

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

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

Upvotes: 3

Views: 3251

Answers (2)

SolutionYogi
SolutionYogi

Reputation: 32243

One needs to calculate how much of the 'footer' is visible and then position your #about above the footer so that it doesn't hide it. I think following code should do the trick:

var name = "#about";  
var menuYloc = null;  
var footer = '#yourFooterId'; //Specify the ID for your footer.

 $(document).ready(
    function()
    {  
        menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))  
        $(window).scroll(
            function() 
            {   
                var offset = menuYloc + $(document).scrollTop();
                var anotherOffset = offset;

                var docTop = $(window).scrollTop();
                var footerTop = $(footer).offset().top;

                var maxOffset = footerTop - $(name).height() - 20;
                var minOffset = docTop;

                offset = offset > maxOffset ? maxOffset : offset;
                offset = offset < minOffset ? minOffset : offset;

                $(name).animate({top:offset + 'px'},{duration:500,queue:false});      
            }
        );  
    }
);

EDIT 1:

Fixed the bug in the above code. It should work now.

EDIT 2:

Updated demo code, it should work in all browsers. [Earlier demo code had 'console.log' call which may fail if you don't use Firefox]

EDIT 3:

Making sure that floating menu is always visible by calculating the minimum offset.

Check the demo →

Demo Page Code

This is how the demo looks like:

Red floating div will always remain above the footer whereas the green floating div has no such logic applied.

Upvotes: 3

PetersenDidIt
PetersenDidIt

Reputation: 25620

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});  
    });


});

Upvotes: 1

Related Questions