通過頁腳推送固定側欄

我發現了幾十個關於固定側欄的問題。我的問題是，一旦頁腳進入視口，側欄不應該被修復。您可以在Gather.Ly或Trek Factory Racing頁面看到完全相同的行爲。通過頁腳推送固定側欄

我假設他們的解決方案只是保持邊欄固定，而是按視口中可見的頁腳像素數推動（頁邊距）。

我的佈局

100％包裝與兩個div。一個用於內容，另一個用100％高度圖像。包裝後我有100％寬度頁腳。

我想我唯一可能的解決方案是jQuery？你能幫我解碼嗎？我似乎有點失落......

來源

2014-09-01 Martin Smejkal

您需要向我們提供一些代碼才能幫助您。在這裏粘貼你的代碼（你現在得到了什麼），並做一個小提琴。 – Zemljoradnik 2014-09-01 07:11:26

您可以使用JavaScrip來檢查頁腳是否在視口（您可以看到的區域）或不。您可以搜索該怎麼做，這裏對堆棧溢出，或使用jQuery和這個插件：http://www.appelsiini.net/projects/viewport

你的代碼可能看起來類似這樣（如果你用我提到的插件）：

$(window).scroll(function() 
{ 
    if ($('.footer:in-viewport').exists()) { 
     $('.sidebar').css('position','static'); 
    } 
}); 

if (jQuery){ 
    jQuery.fn.exists = function() { 
     return this.length>0; 
    }; 
}

希望這回答你的問題！

來源

2014-09-01 07:25:20

非常感謝。這實際上工作。我通過切換類來更改腳本，而不是直接更改css。對於我而言它實際上是更好的解決方案，用於彌補保證金要求沒有硬性的計算。 – 2014-09-01 08:47:46

很高興能幫到你！上SO代碼始終是一個建議，沒有固定的溶液（好，至少常常）。做任何你喜歡的事;） – 2014-09-01 09:01:18

通過頁腳推送固定側欄

回答

相關問題