滾動時保持標題元素始終在頂部？

Question

我已經閱讀了很多關於這個主題的文章並試圖實現一些，但我似乎無法做到正確。 我有一個簡單的HTML表，它比較了產品：

<table>
  <tr>
    <th>Product:</th>
    <th>Product 1</th>
    <th>Product 2</th>
    <th>Product 3</th>
  </tr>
  <tr>
    <td>Features</td>
    <td>Product 1 features</td>
    <td>Product 2 features</td>
    <td>Product 3 features</td>
   </tr>
   and so the list goes on...
 </table>

我想要的是標題行始終位於活動窗口的頂部，這是我向下滾動時的頂行，因為我的行向下走得很遠。 我希望標簽中的產品名稱始終可見，以便用戶可以始終將內容與最上一行中的不同產品相關聯。

先感謝您！

Answer 1

我簡單的技術是將標題行放在與實際數據不同的table 。 這個標題表被設置為fixed它的位置，然后下面的表格保存結果，它的margin-top設置了標題表的height 。

這會產生標題保持原樣和表格滾動的效果。

這里有一個基本的例子： http ： //jsfiddle.net/zKDR4/2/

您還可以使用jQuery插件創建固定標頭。 看看這個http://fixedheadertable.com/真的很簡單實現。

編輯

正如Anders所提到的，如果你沿着我建議的路線走下去，你需要設置th和td元素的寬度。 否則他們不會匹配，因為他們是單獨的表。

Answer 2

我遇到了行標題（小時）和列標題（天）的規划問題。 我想保持兩者的可見性。 應用程序在IFrame中顯示內容，因此我在IFrame外部創建了一個水平DIV和一個垂直DIV，其樣式為“overflow：hidden”。 然后我將滾動與IFrame的“onscroll”事件同步。

這是我的代碼，用於將標題與滾動同步：

window.onscroll = function () {

        try {
            // - Scroll days header (on the top) horizontally
            var offsetX = (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft; // Source: http://stackoverflow.com/questions/2717252/document-body-scrolltop-is-always-0-in-ie-even-when-scrolling
            var header1Div = window.parent.document.getElementById("EntetesColonnes");
            header1Div.scrollLeft = offsetX;

            // - Scroll hours header (on the left) vertically 
            var offsetY = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop; // Source: http://stackoverflow.com/questions/2717252/document-body-scrolltop-is-always-0-in-ie-even-when-scrolling
            var header2Div = window.parent.document.getElementById("HeaderHoursLeft");
            header2Div.scrollTop = offsetY;
        }
        catch (ex) {
            alert("FrmPlanningChirurgien/window.onscroll: " + ex.message);
        }
    }

我的解決方案並不那么簡單，因為我必須在“onresize”中設置水平DIV的寬度和垂直DIV的高度。 然后這會引起更多的復雜性，因為onResize每秒可能被觸發很多次，並且當滾動發生時甚至會在IE8中觸發此事件。 所以我做了一個setTimeout來防止標題過於頻繁地被重繪：

var PREVIOUS_frameWidth = 0;
var PREVIOUS_frameHeight = 0;
var timerMakeHeaders = null;

window.onresize = function () {
    try {

        var frameWidth = CROSS.getWindowWidth();
        var frameHeight = CROSS.getWindowHeight();

        if (frameWidth != PREVIOUS_frameWidth || frameHeight != PREVIOUS_frameHeight) {

            // - *** Launch headers creation method
            // - If there is another query to redraw, the Timer is stopped and recreated.
            // - The headers are only redrawn when Timer fires.
            if (timerMakeHeaders != null) {
                window.clearTimeout(timerMakeHeaders);
                timerMakeHeaders = null;
            }
            timerMakeHeaders = window.setTimeout(makeHeaders, 50); 

            // - *** Store new values
            PREVIOUS_frameWidth = frameWidth;
            PREVIOUS_frameHeight = frameHeight;
        }
    } catch (e) { alert("Erreur window.onresize/FrmPlanningChirurgien.aspx : " + e.message); }
}

最后， makeHeaders()方法必須調整DIV的大小：

function makeHeaders() {

    // (...)

    var frame = window.parent.document.getElementById("CalendarFrame"); 
    var iframeRect = frame.getBoundingClientRect(); 
    headerDiv.style.width = iframeRect.right - iframeRect.left - 20; // The 20 pixels are here for the vertical scrollbar width
    headerDiv.scrollLeft = frame.scrollLeft;

    // (...)


    var headerHourDiv = window.parent.document.getElementById("HeaderHoursLeft");
    var newHeight = iframeRect.bottom - iframeRect.top - 20 - 7; // The VISIBLE width for the DIV must be equal to IFRAME Width minus the scroll width or height
    headerHourDiv.style.height = newHeight; 
    headerHourDiv.scrollTop = frame.scrollTop;       


}
catch (e) {
    alert("makeHeaders: " + e.message);
}    }

也許有可能不使用IFRAME，並且只使用3個DIVS：每個標題一個，內容的最后一個。 但我認為機制必須相同：需要滾動位置之間的同步。

最好的祝福，

Answer 3

我使用JSFiddle創建了一個示例，您可以將其視為演示 。

唯一的缺點是，當您使用position: fixed時，您需要指定列大小position: fixed丟失標題上的寬度。

這是示例的CSS，HTML與您提供的相同。

thead {
    height: 1em;
}

thead tr {
    position: fixed;
    background-color: #FFF;
}

Answer 4

你可以通過制作div來修復位置。 或者它也可以通過添加內聯css來完成

<table style="position:fixed;">
  <tr>
     <th>Product:</th>
     <th>Product 1</th>
     <th>Product 2</th>
      <th>Product 3</th>
  </tr>
  <tr>
    <td>Features</td>
     <td>Product 1 features</td>
     <td>Product 2 features</td>
     <td>Product 3 features</td>
   </tr>
  </table>