浮動菜單在它到達頁面底部之前停止

Question

我有一個浮動菜單（絕對定位），在用戶向下滾動頁面時保持在視圖中，問題是我有一個相當大的頁腳，如果您滾動所有通往頁面底部的方式會與頁腳衝突。

我只是想讓它從頁面底部停下來說400px ..有誰知道這是否可以做到？

下面是代碼：

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：

固定在上面的代碼中的bug。它現在應該工作。

編輯2：

更新演示代碼，它應該在所有的瀏覽器。 [早些時候演示代碼了「的console.log」調用，如果你不使用Firefox可能會失敗]

編輯3：

確保浮動菜單始終是通過計算最小的偏移量可見。

Check the demo →

Demo Page Code

這是演示如何看起來像：

紅浮動DIV將始終保持頁腳上方，而綠色浮動div有沒有應用這樣的邏輯。

Answer 2

嘗試是這樣的（未經測試）：

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


});