固定頁腳擴展當滾動到頁面

的

底部我想達成的目標相當準確頁腳的解決方案如下所示：http://downtothewire.co.nz/ppp-2010/固定頁腳擴展當滾動到頁面

只顯示頁腳的狹窄部分固定在瀏覽器底部窗口。當用戶滾動到頁面底部時，顯示頁腳的其餘部分。

我發現這個在這裏https://github.com/ark1/Sticky-Footer-jQuery-Plugin

但不能讓它開始工作......建議的最低使用代碼似乎並沒有太大的幫助：jsFiddle

最低CSS：

.liner {margin:0 auto;width:960px;} 
#Footer {width: 100%;z-index:100;position:relative;overflow: hidden}

理想的標記示例：

<body> 
<div id="Container" class="liner"> 
<p>Main content</p> 
</div> 
<div id="Footer"> 
    <div class="liner"> 
     <p>Centred footer content</p> 
    </div> 
</div> 
</body>

例USAG E：

$('#Footer').stickyfooter();

道歉，我的JS技能不足窮，但我會很感激一些幫助，或指針到另一個現有的腳本，將做到這一點。

非常感謝。

來源

2014-04-07 user1154435

下面是該網站是如何完成他們的頁腳http://jsfiddle.net/9REfa/5/ – Pete

看看這個小提琴這裏

我看見有幾個問題，你的小提琴。首先，因爲容器沒有內容，所以沒有任何高度推下頁腳，因此沒有什麼可以向下滾動來啓動頁腳。

其次，您的JavaScript的順序。在包含它之前，您正在調用stickyfooter腳本。

第三個是因爲你的頁腳中沒有任何高度的內容，一旦它達到底部就不會擴展。

請務必包括

jquery.heyday.stickyfooter.js

在打電話前

$(function() { 
    $('#Footer').stickyfooter(); 
});

的幾個注意事項：

你會發現我已經添加了這些CSS規則，他們不應該一旦你的容器和頁腳包含內容，就需要它。我只是把它們放在示範！

#Container{ 
    height:1000px; 
} 

#Footer p{ 
    height:300px; 
}

來源

2014-04-07 11:24:35 nick

太感謝了一個簡單的例子。我會稍後嘗試一下。我是對的，這不適用於更高版本的jQuery？ – user1154435

那就對了。調用.browser（在這個stickyfooter插件中使用）已經在jquery 1.9中被刪除 - 請看這裏：http：//jquery.com/upgrade-guide/1.9/ – nick

嗨，尼克，如果我可以快速跟進問題：腳本在摺疊時如何確定頁腳有多少可見？我需要根據我需要看到的特定內容來調整它，但我無法弄清腳本是如何產生負底部邊距的，或者如何改變這個...非常感謝 – user1154435

固定頁腳擴展當滾動到頁面

回答

相關問題