2012-03-18 109 views
2

我想知道什麼是實現這一目標的圖像 http://dl.dropbox.com/u/24920447/screen_shot.jpg 的結果最好的方法我有了通過AJAX和高度會有所不同加載內容的側邊欄。如果側邊欄加上標題的高度小於視口,我希望側欄(黃色框)底部的div處於文檔的正常流程中。但是,如果側邊欄的高度加上頁眉高度大於視口,我希望div被固定到瀏覽器底部,並且內側邊欄內容可以滾動。 我已經建立了這個小提琴 http://jsfiddle.net/cfed/B5bRt/4/調整DIV高度基於窗口的高度

我想做到這一點,最簡單的方法是使用jQuery類之間的交流,但我不知道如何執行此操作。

如何解決這個任何提示將非常appreicated

回答

1

頁腳重新定位很容易使用類,滾動ul有點棘手。我毫不懷疑這是可能的,但我發現使用JavaScript一起破解解決方案更容易。因此,像這樣的工作:

var el = $('#sidebar'); 
var ul = el.find('ul'); 

el.removeClass('fixed'); 
ul.height('auto'); 

if (el.offset().top + el.height() > $(window).height()) { 
    el.addClass('fixed'); 

    var ul_height = el.find('.default').offset().top - el.offset().top - el.find('.top').height(); 
    ul.height(ul_height); 
} 

這裏有一個工作的jsfiddle:http://jsfiddle.net/B5bRt/6/。它實際上是一個看起來很破爛的解決方案,但它的工作原理:)

+0

非常感謝基督教徒,這正是我所追求的。 – cfed 2012-03-19 04:18:43

0

看看到粘頁腳。其中的一些修改應該是你所需要的。我忘記了您需要的確切代碼,但我知道在排查我自己的頁腳時我看到了這種效果。