CODEWITHSUNDEEP
javascriptjquery
pete_schuster
pete_schuster

Reputation: 227

jQuery Floating Div with Bottom Limit

Trying to duplicate the mashable effect with two menus. I got the scrolling effect working, but I was looking for the effect to stop at the top of the footer. I was thinking I could do a conditional statement with the limits, but I wasn't sure how to pull it off.

Here is the javascript I'm using.

var name = ".floater";
var menuYloc = null;

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

Here is the link to the build site. http://host.philmadelphia2.com/~chill/about/

Thanks in advance.

Upvotes: 1

Views: 4889

Answers (1)

Patrick Evans
Patrick Evans

Reputation: 42736

use jquery's .offset to find the position of the footers location within the page, then use the menu's top position + its height to determine if its at or near the footers position and stop if it is.

#Footer, and $Menu are the id's of the footer and menu respectively change them obviously to what they are.

EDIT: previous example didnt work properly with small window heights this one should 

jQuery(document).ready(function($) 
{ 
    menuYloc = parseInt(jQuery(name).css("top").substring(0,jQuery(name).css("top").indexOf("px")))
    jQuery(window).scroll(function () {
        var contentHeight = jQuery("#content").height();
        var menuHeight = jQuery(".floater").height();

        offset = menuYloc+jQuery(document).scrollTop();
        if( (offset+menuHeight) > (contentHeight - menuHeight) )
            offset =  (contentHeight - menuHeight);              

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

Upvotes: 3

Related Questions