Question

How can I have a sliding menu div that doesn t move unless the page is scrolled down past a certain point

I used the code from this link for a floating menu. it has how to stop the stop float at the header, but not at the footer. How can I modify this code to stop at the footer?

    //// CONFIGURATION VARIABLES:

var name    = "#sidebar";
var menu_top_limit   = 0;
var menu_top_margin  = 0;
var menu_shift_duration = 500;
var menuYloc = null;
///////////////////////////////////

$(window).scroll(function() 
{ 
 // Calculate the top offset, adding a limit
 offset = menuYloc + $(document).scrollTop() + menu_top_margin;

 // Limit the offset to 241 pixels...
 // This keeps the menu out of our header area:
 if(offset < menu_top_limit)
  offset = menu_top_limit;

 // Give it the PX for pixels:
 offset += "px";

 // Animate:
 $(name).animate({top:offset},{duration:menu_shift_duration,queue:false});
 });

I have another similar code that is supposed to stop at the footer, but it is not working:

var name = "#sidebar";  
var menuYloc = null;  
var footer =  #footer ; //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});      
            }
        );  
    }
);

Answer 1

If you are looking for how to keep the footer on the bottom and a scrolling middle, I think I ve got that done see my blog post below(under the section "On to the WebPage") Go to http://www.jimleo.com to see it in action.

http://jimleonardo.blogspot.com/2009/02/jimleocom-is-back-up-some-how-to.html

Answer 2

It sounds like you want a page footer that is always visible. Wouldn t it be a lot easier to create two absolute elements, one at the top of the page, and one at the bottom. And then add all of your content to a div which has 100% width/height (have to do this with javascript).

Then you don t have to hook stuff up to the body s scroll event (this never looks very good).

If you add an offset, or a few line breaks before and after your content it should work a lot better than what your attempting.

I ve done it with my own page here.

友情链接