CODEWITHSUNDEEP
javascripthtmlcsssticky
infantrygarrett
infantrygarrett

Reputation: 35

Sticky header inside a container

I have a table that is in a container on a page. I am trying to get the headers of the table to stick to the top of the page when the user scrolls past. I have tried multiple methods to make the headers sticky but I am not having much luck.

The table data is being generated in JS.

Any help would be great!

HTML

    <div class="container-fluid">
<div id="userTable" class="sticky-table">
        <table id="ticketsTable">
            <thead id="head" class="sticky-header"</thead>
            <tbody id="body">
            </tbody>
        </table>
    </div>
</div>

JavaScript

function generateTableHeader() {
    var headerArray = generateHeaderArray(),

    headerString = "<thead id='head'><tr>" + "<th></th>";

    if (!headerArray.length) {
        $("#head").empty();
        $("#userTable").append("<h1 id='noTicketsFound'>No tickets found.</h1>");
        return;
    }

    headerOrder.forEach(function(key) {
        var isChecked = key;

        if (!$(".dropdown-menu-fixed #" + key).is(":checked")) {
            isChecked += " uncheckedColumn";
        }

        headerString += "<th data-property='" + key + "' class='sortableHeader " + isChecked + "'>" +
        dictionary[key] + "</th>";
    });

    headerString += "</tr></thead>";

    // replaceWith seems faster than separate calls to empty then append.
    $("#head").replaceWith(headerString);

    // Add SORTCLASS to SORTPROPERTY column, since that is already sorted.
    $(".sortableHeader." + SORTPROPERTY).addClass(SORTCLASS);
}

make headers sticky on scroll function

function stickyTableHeader() {
    $(".sticky-table").each(function() {
      var el = $(this),
        offset = el.offset(),
        scrollTop = $(window).scrollTop(),
        stickyHeader = $(".stickyHeader", this);

      if (scrollTop > offset.top && scrollTop < offset.top + el.height()) {
        stickyHeader.css({
          visibility: "visible"
        });
      } else {
        stickyHeader.css({
          visibility: "hidden"
        });
      }
    });
  }

  // DOM Ready
  $(function() {
    var clonedHeaderRow;

    $(".sticky-table").each(function() {
      clonedHeaderRow = $(".sticky-header", this);
      clonedHeaderRow
        .before(clonedHeaderRow.clone())
        .css("width", clonedHeaderRow.width())
        .addClass("stickyHeader");
    });

    $(window)
      .scroll(stickyTableHeader)
      .trigger("scroll");
  });

Upvotes: 3

Views: 6089

Answers (3)

Tharindu Damith
Tharindu Damith

Reputation: 1

th {
  position: sticky;
  top: 0;
  background: #eee;
}

td, th {
  padding: 10px;
}
<div class="container">
  <h1>Some Title</h1>
  
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
      </tr>
    </thead>
    
    <tbody>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: -1

alQemist
alQemist

Reputation: 360

I believe the position:sticky; is not yet supported by all browsers.

I have a solution that is a bit heavy-handed but it works across all browsers. Basically you use one Div as a mask over another Div.

Both of these divs contain the same exact table. The mask-div will effectively crop the table to show only the thead. 

<div class = 'mask-div'>
   <table>Copy of Table A</table>
</div>

<div class='scrolling-div">
  <table> Table A </table>
</div>

<style>

div{
  top:0px;
  left:0px;
}

.mask-div{
  width:100%;
  position: fixed;
  height:40px;
  overflow: hidden;
  background:white;
}

<style>

Upvotes: 0

coreyward
coreyward

Reputation: 80140

This is pretty simple using CSS:

th {
  position: sticky;
  top: 0;
  background: #eee;
}

td, th {
  padding: 10px;
}
<div class="container">
  <h1>Some Title</h1>
  
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
      </tr>
    </thead>
    
    <tbody>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 2

Related Questions