如何在页脚停止浮动（滑动）div答案

【问题标题】：How to stop floating (sliding) div at footer如何在页脚停止浮动（滑动）div
【发布时间】：2009-11-14 00:47:25
【问题描述】：

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

我将此链接中的代码用于浮动菜单。它有如何在页眉停止浮动，但不是在页脚。如何修改此代码以在页脚处停止？

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

我有另一个类似的代码应该在页脚处停止，但它不起作用：

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

【问题讨论】：

标签： javascript jquery html header floating

【解决方案1】：

如果您正在寻找如何将页脚保持在底部和滚动中间，我想我已经完成了，请参阅下面的博客文章（在“进入网页”部分下）转到 http://www.jimleo.com看看它的实际效果。

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

【讨论】：

不是真的，吉姆，但感谢您的及时回复。我有一个有目的的浮动导航菜单，因此用户不必滚动回顶部，但是当我到达底部时它会与页脚重叠。最简单的解决方案是让页脚更小（从 300 像素到推荐的 241 像素），但我很固执，想用代码尝试一下。

【解决方案2】：

听起来您想要一个始终可见的页脚。创建两个绝对元素，一个在页面顶部，一个在底部，会不会容易很多。然后将所有内容添加到具有 100% 宽度/高度的 div（必须使用 javascript 执行此操作）。

那么您就不必将内容与主体的滚动事件挂钩（这看起来不太好）。

如果您在内容前后添加偏移量或几个换行符，它应该比您尝试的效果更好。

我已经用my own page here 完成了。

【讨论】：

不。我有一个有目的的浮动菜单，如下所示：kingtray.com