滚动时保持标题元素始终在顶部？

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>