title: Sticky header inside a container
body: <p>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. </p>
  
  <p>The table data is being generated in JS. </p>
  
  <p>Any help would be great!</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div class="container-fluid"&gt;
  &lt;div id="userTable" class="sticky-table"&gt;
          &lt;table id="ticketsTable"&gt;
              &lt;thead id="head" class="sticky-header"&lt;/thead&gt;
              &lt;tbody id="body"&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>function generateTableHeader() {
      var headerArray = generateHeaderArray(),
  
      headerString = "&lt;thead id='head'&gt;&lt;tr&gt;" + "&lt;th&gt;&lt;/th&gt;";
  
      if (!headerArray.length) {
          $("#head").empty();
          $("#userTable").append("&lt;h1 id='noTicketsFound'&gt;No tickets found.&lt;/h1&gt;");
          return;
      }
  
      headerOrder.forEach(function(key) {
          var isChecked = key;
  
          if (!$(".dropdown-menu-fixed #" + key).is(":checked")) {
              isChecked += " uncheckedColumn";
          }
  
          headerString += "&lt;th data-property='" + key + "' class='sortableHeader " + isChecked + "'&gt;" +
          dictionary[key] + "&lt;/th&gt;";
      });
  
      headerString += "&lt;/tr&gt;&lt;/thead&gt;";
  
      // 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);
  }
  </code></pre>
  
  <p>make headers sticky on scroll function</p>
  
  <pre><code>function stickyTableHeader() {
      $(".sticky-table").each(function() {
        var el = $(this),
          offset = el.offset(),
          scrollTop = $(window).scrollTop(),
          stickyHeader = $(".stickyHeader", this);
  
        if (scrollTop &gt; offset.top &amp;&amp; scrollTop &lt; 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");
    });
  </code></pre>