位置DIV與可變高度

現在的問題是：可以說我有這樣的事情：位置DIV與可變高度

<div id="leftcontainer"> 
    <div id="top" style="position:fixed"></div> 
    <div id="below"></div> 
</div>

而且我想有#below DIV，在#top返回DIV下方，但不使用margin-top，因爲#top div的大小不同。此外，#below div可以在大小上有所不同，並且應該在#top div下滾動。

有誰有一個想法如何實現的？ Greets - Chris

來源

2011-07-04 Christian Romeni

你需要實現的jQuery這個 – sandeep

我有jQuery的，究竟是從那裏要走的路？ –

關於以前的評論，你不*需要jQuery爲此 - 它可以用計劃的JavaScript和CSS來完成。 jQuery提供了跨瀏覽器的便捷方法，使其更快實施。 – hemp

這是與jQuery 如果頁面呈現後頂div的高度是固定的相當簡單。

$(document).ready(function() { 
    $('#below').css('top', $('#top').outerHeight()); 
});

這將指定下面元素的css top屬性等於top元素的全部高度。其他佈局因素可能會導致不能成爲top的正確值，在這種情況下，您將不得不確定正確的方式來標識最高值，但是主體是相同的，並且在簡單的情況下，這將無需修改即可使用。

來源

2011-12-24 08:53:42 hemp

我已經創建了這個jquery插件來解決類似的問題，我在哪裏有一箇中間容器（表格數據），並且我希望頭部在列表滾動時修復到頁面頂部（該列表是可變大小）。其中一個問題是，當標題變得固定時，它下面的內容會跳到頁面上（不好）。這個插件補償了「固定」元素，並允許它下面的內容定位和滾動，因爲它應該。

這裏是連結此jquery插件，其可以解決這個問題：

https://github.com/bigspotteddog/ScrollToFixed

此插件的描述如下：

該插件用於固定元件到頂端如果該元素已經滾動到視圖外，則垂直;但是，它確實允許元素繼續向左或向右移動水平滾動。

給出選項marginTop，元件將停止垂直向上一次垂直滾動已到達目標位置移動;但是，當頁面向左或向右滾動時，元素仍然會水平移動。一旦頁面向下滾動通過目標位置，元素將恢復到其在頁面上的原始位置。

該插件在Firefox 3/4進行了測試，谷歌Chrome 10/11，Safari瀏覽器5和Internet Explorer 8/9。

使用您的具體情況：

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script> 

$(document).ready(function() { 
    $('#top').scrollToFixed(); 
});

來源

2011-08-29 18:05:20 bigspotteddog

位置DIV與可變高度

回答

相關問題