固定側邊欄 - 使用jQuery粘到頁腳

我有以下JSFIDDLE來演示我正在使用的頁面佈局，但我很難實現我想要的。固定側邊欄 - 使用jQuery粘到頁腳

如果您將主要內容一直滾動到底部，您將會看到側邊欄的底部符合頁腳的頂部。 這是怎麼總是應該看。但是，如果你調整大小或滾動，你會發現事實並非如此。

經過幾天的css小提琴之後，我總結出這隻能用js來完成。請提供一個工作小提琴，尤其是，如果您聲稱只能使用CSS，而其他人在我的其他問題中可以完成這項工作，但我無法獲得任何工作答案。提出的所有答案的問題是position:fixed被刪除，側邊欄與主要內容一起滾動，這不應該發生。

請幫助達到預期的效果

來源

2013-02-23 parliament

對不起，我不明白，你想邊欄有100％的高度或頁腳被固定在底部？ – martriay 2013-02-23 20:21:57

頁腳不應該固定，它應該與主要內容（紫色）一起滾動並始終粘貼到底部，而不管主要內容的高度（位置：相對）。當頁腳不在視線內時，固定側欄應占據頁眉下方100％的高度。一旦向下滾動並且頁腳變得可見，則側欄應占用頁眉和頁腳之間的所有剩餘高度。在下面的評論進一步解釋 – parliament 2013-02-24 00:12:53

UPDATE：

這顯然不能在CSS實現而已，這裏是一個jQuery的解決方案。

var vh = $("body").height() - $("footer").height(); 
var sh = $("#side").height(); 

$(window).resize(function() { 
    vh = $("body").height() - $("footer").height(); 
    sh = $("#side").height(); 
}); 

$(document).scroll(function() { 
    var vs = $(document).scrollTop() + sh + $("footer").height(); 

    if(vs < vh) 
     $("#side").css("bottom", "0px"); 
    else 
     $("#side").css("bottom", (vs - vh) + "px"); 
});

這是測試的jsFiddle。

來源

2013-02-23 20:26:10 goffreder

嘿謝謝嘗試，但這不是我想要的。頁腳不應該像你的例子那樣被修復。頁腳應該位於相對位置，以便與主內容（紫色）一起滾動，同時固定側欄的底部粘貼到頁腳頂部（如您的示例中所示）。這裏看看這個：http://jsfiddle.net/UUFLX/1/我將頁腳設置回相對位置，並將身體標記的背景設置爲更深的綠色陰影。邊欄應始終覆蓋較深的綠色區域，但是當您向上滾動頁腳時，應避開。 – parliament 2013-02-24 00:08:43

恩，現在好了，我明白了。我認爲你是對的，這隻能用css來實現，因爲你基本上需要調整'＃size' div的大小，這取決於你向下滾動了多少頁面。我使用jQuery解決方案製作了一個jsFiddle（但它只能在javascript中輕鬆更改），只是爲了查看是否正確：[jsFiddle]（http://jsfiddle.net/goffreder/cYAct/2/）。我會多撥一點... – goffreder 2013-02-24 10:12:15

對不起，我在前一個小提琴中犯了一個錯誤，[THIS]（http://jsfiddle.net/goffreder/cYAct/4/）是個不錯的... – goffreder 2013-02-24 10:26:26

固定側邊欄 - 使用jQuery粘到頁腳

回答

相關問題