2012-02-09 60 views
0

我正在開發基於WebSphere Portal 7的PageBuilder2(csa2.theme)的自定義主題。我正在使用JQuery 1.7.1。 要求之一是有一個頁腳(編號爲div#footer)和一個幫助欄(類是div.footer.flotante),它位於頁腳頂部,而頁腳位於視口中,但它需要在頁腳底部浮動,而頁腳不在頁腳底部在視口中...還有Facebook新的時間線工具欄(添加到朋友等)或Mashable社交部件,只有從底部。JQuery:在WebSphere Portal 7主題中從頁面底部浮動工具欄

Scheme of what I want to do

以下是我所用jQuery做得到這樣一個片段:

$(window).scroll(function (event) { 
    var barra = $('div.footer.flotante'); 
    var offset = barra.offset(); 
    var bh = barra.height(); 
    var h = offset.top; 
    var wh = $(window).height(); 

    var dh = $(document).height(); 
    var y = $(this).scrollTop(); 
    var x = dh - y - wh; 
    var hf = $("div#footer").height(); 

    if (x > hf) { 
     barra.addClass('fixed'); 
    } else { 
     barra.removeClass('fixed'); 
    } 
}); 

這些CSS樣式,我使用的是:

div.footer.flotante{ 
    background:url(../images/footerone.png) repeat-x; 
    width:100%; 
} 
div.footer.flotante.fixed{ 
    position: fixed; 
    bottom: 0px; 
    z-index: 1; 
} 

隨着該代碼我得到浮動我的工具欄的情況下,與靜態內容的HTML頁面(因此值爲dh是恆定的)。我的問題是,作爲一個主題開發,預計將有內容動態加載到文檔主體,將值增加到未知數量的像素。在這種情況下,計算x的值的初始值爲dh,結果導致錯誤放置的浮動工具欄。

  1. 如何在渲染內容後重新計算dh的值?
  2. 既然沒有這樣叫offset().bottom的屬性,有沒有辦法,爲了計算這樣我的工具欄無需知道dh終值offset().top值暫時「翻轉倒置」的文件?
  3. 你有另外一個建議去做我正在嘗試的嗎?

在此先感謝。

+0

我找到了問題的原因:它是一個絕對定位的圖像,它具有負的「底部」屬性,從而在頁腳下創建了一個額外的垂直間距,並增加了「dh」值。 – 2012-02-10 19:21:19

+1

添加那個答案,然後選擇它作爲正確的。這樣更好地爲您的帳戶。 – Will 2012-02-14 14:53:30

+0

謝謝,@威爾 – 2012-02-17 12:56:08

回答

1

我找到了問題的原因:它是一個絕對定位的圖像,對於具有負底部屬性的徽標,因此在頁腳下方創建了一個額外的垂直間距,並且增加了dh的值。

相關問題