Utrzymując element nagłówka zawsze na wierzchu podczas przewijania?

Question

Czytałem wiele artykułów na ten temat i próbowałem implementować kilka, ale po prostu nie mogę tego naprawić. Mam proste tabeli HTML, który porównuje produkty:

<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> 

Co chcę jest dla wiersza nagłówka, aby zawsze być na szczycie aktywnego okna, czyli górny rząd, kiedy przewinąć w dół, ponieważ moje wiersze iść dość daleko. Chcę, aby nazwy produktów w tagach były zawsze widoczne, aby użytkownik mógł przez cały czas odsyłać zawartość do różnych produktów w najwyższym rzędzie.

Z góry dziękuję!

Answer 1

Prosta technika polega na tym, aby wiersz nagłówka znajdował się w oddzielnej table z rzeczywistych danych. Ta tabela nagłówków ma ustawioną pozycję jako fixed, a następnie tabela poniżej, która zawiera wyniki, ma wartość margin-top, ustawiając height tabeli nagłówków.

Powoduje to powstanie efektu nagłówka pozostającego w miejscu i przewijania tabeli.

Podstawowym przykładem tutaj: http://jsfiddle.net/zKDR4/2/

Można również utworzyć stały nagłówek z wtyczek jQuery. Rzuć okiem na ten jeden bardzo prosty w realizacji.

Edit

Anders wspomniał, jeśli zejść mój sugerowanej trasy trzeba będzie ustawić Szerokości th i td elementów. W przeciwnym razie nie pasują do siebie, ponieważ są oddzielnymi tabelami.

Answer 2

Możesz to zrobić, tworząc div i naprawić pozycję. lub może to również zrobić poprzez dodanie inline 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> 

Answer 3

Stworzyłem przykład stosując JSFiddle, które można view as a demo.

Jedynym minusem jest to, że musisz określić rozmiary kolumn, ponieważ podczas korzystania z position: fixed tracisz szerokość w nagłówku.

To jest CSS dla przykładu, HTML jest taki sam jak dostarczony.

thead { 
    height: 1em; 
} 

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

Answer 4

Miałem problem z planowaniem z nagłówkami wierszy (godziny) i nagłówkami kolumn (dni). Chciałem zachować widoczność obu. Aplikacja pokazuje zawartość w ramce IFrame, więc utworzyłem poziomy DIV i pionowy DIV poza ramką IFrame ze stylem "przepełnienie: ukryty". Następnie zsynchronizowałem przewijanie z zdarzeniem "onscroll" ramki IFrame.

Oto mój kod synchronizować nagłówki z przewijaniem:

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); 
     } 
    } 

Moje rozwiązanie nie jest takie proste, bo trzeba było ustawić w „onresize” szerokość poziomej DIV i wysokość pionową DIV. To powoduje większą złożoność, ponieważ funkcja onResize może być uruchamiana wiele razy na sekundę, a zdarzenie to jest nawet uruchamiane w IE8, gdy występuje przewijanie. Więc zrobiłem setTimeout aby zapobiec nagłówki być odświeżana zbyt często:

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); } 
} 

I wreszcie metoda makeHeaders() trzeba zmienić rozmiar 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); 
} } 

Może to być możliwe, aby nie używać IFRAME i używać tylko 3 DIVS: po jednym dla każdego nagłówka, a ostatni dla treści. Ale mechanizm musi być taki sam, jak myślę: potrzebuje synchronizacji pomiędzy pozycjami przewijania.

poważaniem,