HTML：將元素儘可能保留在其自己的元素中，而不會脫離屏幕

Question

想象一個博客帖子的長列表，每個帖子左側都有個人資料圖片。我想知道一個有效的（跨瀏覽器）的方式有當前屏幕上的資料圖片逗留其博客文章的最上部的左：

該網頁將打開這樣的：

--------------------Top of window----------------- 
    --- -------------------------------------- 
    |A| | A's post       | 
    --- |         | 
     |         | 
     | Line 4        | 
     |         | 
     |         | 
     |         | 
     |         | 
     |         | 
     -------------------------------------- 

    --- -------------------------------------- 
    |B| | B's post       | 
    --- |         | 
     |         | 
     |         | 
     |         | 
     |         | 
     |         | 
     |         | 
     |         | 
     -------------------------------------- 

但是，當頁面滾動下來就應該是這樣的：

--------------------Top of window----------------- 
    --- | Line 4        | 
    |A| |         | 
    --- |         | 
     |         | 
     |         | 
     |         | 
     -------------------------------------- 

    --- -------------------------------------- 
    |B| | B's post       | 
    --- |         | 
     |         | 
     |         | 
     |         | 
     |         | 
     |         | 
     |         | 
     |         | 
     -------------------------------------- 

最後是這樣的（聲明爲A的個人資料圖片的底部與博客帖子底部兩者搬離對齊屏幕頂部）：

--------------------Top of window----------------- 
    |A| |         | 
    --- -------------------------------------- 

    --- -------------------------------------- 
    |B| | B's post       | 
    --- |         | 
     |         | 
     |         | 
     |         | 
     |         | 
     |         | 
     |         | 
     |         | 
     -------------------------------------- 

我希望我的解釋清楚！

理想情況下，我將能夠完全在CSS中實現這一點（我非常懷疑這是可能的，同時支持IE7！）但是，有效的方式來實現這個使用jQuery也將不勝感激。

謝謝！

Answer 1

你必須用javascript檢查，當這個項目離開屏幕，並將其css位置設置爲固定的，沒有css唯一的方法來做到這一點。