粘滯頁腳總是在屏幕底部（不是網頁）

我使用Chris Coyier's Sticky Footer example添加頁腳到我的網頁。它很棒！粘滯頁腳總是在屏幕底部（不是網頁）

但是，我想知道如何調整代碼，以便頁腳位於屏幕的底部 - 而不是網頁。

因此，例如，當它第一次加載休息在我的屏幕的頁腳 - 但是當我開始向下滾動它調整自己並鎖定在頁面的底部。

如何將它保存在屏幕底部？

我用盡調整的最後2行emample的：

$(window) 
       .scroll(positionFooter) 
       .resize(positionFooter)

，但沒有得到太遠......

來源

2013-10-11 Chris

檢查我的答案http://stackoverflow.com/ a/19254147/1548301 –

我想我對你的意思感到困惑 - 粘性頁腳通常用於無法滾動的頁面，但你希望某些東西適合窗口的底部 - 你在尋找類似於這個http://jsfiddle.net/8YWHn/ –

@JamesDaly這就是我正在尋找的！請把你的css和js - 或者只是這個jfiddle - 放在一個答案中，以便我可以接受它。 CSS中的css，fixed和eds語句做到了。謝謝！ – Chris

希望這對你的作品http://jsfiddle.net/8YWHn/

的CSS

.fixed { 
    position:fixed; 
    bottom:0px; 
    -webkit-backface-visibility:hidden; 

}

the js

var footerHeight = 0, 
       footerTop = 0, 
       $footer = $("footer"); 

      positionFooter(); 

      function positionFooter() { 

        footerHeight = $footer.height(); 
        footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px"; 

        if (($(document.body).height()+footerHeight) < $(window).height()) { 
         $footer.css({ 
          position: "absolute" 
         }).animate({ 
          top: footerTop 
         }) 
        } else { 
         $footer.addClass('fixed'); 
        } 

      } 

      $(window) 
        .scroll(positionFooter) 
        .resize(positionFooter)

來源

2013-10-11 04:30:40

另一種方式來做到這一點對我的作品被簡單地替換在JavaScript行：

position: "static"

有：

position: "fixed"

來源

2013-10-11 04:49:33 Chris

粘滯頁腳總是在屏幕底部（不是網頁）

回答

相關問題