javascript - float 菜单在到达页面底部之前停止

Question

我有一个 float 菜单(绝对定位)，当用户向下滚动页面时，它会保持在 View 中，问题是我有一个相当大的页脚，如果你一直滚动到页面底部，它会与页脚。

我只是想让它停止说距页面底部 400 像素。有谁知道这是否可以做到？

代码如下:

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

提前致谢!

瑞安

Answer 1

需要计算有多少“页脚”可见，然后将#about 放在页脚上方，这样就不会隐藏它。我认为以下代码应该可以解决问题:

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

编辑 1:

修复了上述代码中的错误。它现在应该工作了。

编辑 2:

更新了演示代码，它应该适用于所有浏览器。 [早期的演示代码有 'console.log' 调用，如果您不使用 Firefox，它可能会失败]

编辑 3:

通过计算最小偏移量确保 float 菜单始终可见。

Check the demo →

Demo Page Code

这是演示的样子:

红色 float div 将始终保持在页脚上方，而绿色 float div 则没有应用此类逻辑。