Puedes lograrlo apliqué los siguientes cambios: 1. Para dejar algo fijo usa css, mediante `position: fixed` que hace que el posicionamiento sea absoluto y `top: 0` que nos pone en la parte superior 2. Utiliza el evento `window.onscroll` para detectar el movimiento del ratón 3. Usa la propiedad `window.pageYOffset` para saber el desplazamiento vertical 4. Obten el elemento html del encabezado usando `document.getElementById("myHeader")`. 5. obten la posición vertical del encabezado mediante la propiedad `offsetTop`. 6. Agrega y quita la clase de css que deja el encabezado fijo mediante el uso de `elementoweb.classList.add("nombre de la clase");` y `eleementoweb.classList.remove("nombre de la clase")` respectivamente. 7. Para mejorar la apariencia, y como en tu caso usas una tabla, duplicamos el encabezado pero lo ponemos invisible para que no se descuadren las posiciones de la demás tabla. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> //$('.listado_volumen_negocio > tr').remove(); var listado_volumen_negocio = $('.listado_volumen_negocio'); var response = { "data": [{ "Nivel_Codigo": 1, "Nombre": "Juan", "VNIndividual": 4, "VNRed": 7, "Titulo": "10" }, { "Nivel_Codigo": 2, "Nombre": "Pablo", "VNIndividual": 5, "VNRed": 8, "Titulo": "11" }, { "Nivel_Codigo": 2, "Nombre": "Pablo", "VNIndividual": 5, "VNRed": 8, "Titulo": "11" }, { "Nivel_Codigo": 2, "Nombre": "Pablo", "VNIndividual": 5, "VNRed": 8, "Titulo": "11" }, { "Nivel_Codigo": 2, "Nombre": "Pablo", "VNIndividual": 5, "VNRed": 8, "Titulo": "11" }, { "Nivel_Codigo": 2, "Nombre": "Pablo", "VNIndividual": 5, "VNRed": 8, "Titulo": "11" }, { "Nivel_Codigo": 2, "Nombre": "Pablo", "VNIndividual": 5, "VNRed": 8, "Titulo": "11" }, { "Nivel_Codigo": 2, "Nombre": "Pablo", "VNIndividual": 5, "VNRed": 8, "Titulo": "11" }, { "Nivel_Codigo": 2, "Nombre": "Pablo", "VNIndividual": 5, "VNRed": 8, "Titulo": "11" }, { "Nivel_Codigo": 2, "Nombre": "Pablo", "VNIndividual": 5, "VNRed": 8, "Titulo": "11" }, { "Nivel_Codigo": 2, "Nombre": "Pablo", "VNIndividual": 5, "VNRed": 8, "Titulo": "11" }, { "Nivel_Codigo": 2, "Nombre": "Pablo", "VNIndividual": 5, "VNRed": 8, "Titulo": "11" }, { "Nivel_Codigo": 2, "Nombre": "Pablo", "VNIndividual": 5, "VNRed": 8, "Titulo": "11" }, { "Nivel_Codigo": 2, "Nombre": "Pablo", "VNIndividual": 5, "VNRed": 8, "Titulo": "11" } ] }; $.each(response.data, function(index, value) { $('<tr>') .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').append("<p style='margin-bottom: 0px;margin-top: 0px;'>" + value.Nivel_Codigo + "</p>" + "<p style='margin-bottom: 0px;margin-top: 0px;'>" + value.Nombre + "</p>")) .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNIndividual))) .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNRed))) .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(value.Titulo)) .appendTo(listado_volumen_negocio); }); function moneda(any) { return "$" + any; } /////////////// header //////////// // When the user scrolls the page, execute myFunction window.onscroll = function() { myFunction() }; // Get the header var header = document.getElementById("myHeader"); // Get the offset position of the navbar var sticky = header.offsetTop; // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position function myFunction() { if (window.pageYOffset > sticky) { header.classList.add("sticky"); } else { header.classList.remove("sticky"); } } <!-- language: lang-css --> /* estilo del encabezado */ .header { background: #fff; color: #000; } /* Contenido */ .content { padding: 10px; } /* esta clase se agrega con js */ .sticky { position: fixed; top: 0; width: 100% } .tdoculto { visibility: hidden; } <!-- language: lang-html --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card data-table nueva-table freeze-table"> <table class="table"> <thead class="header" id="myHeader"> <tr> <th class="nuevo-td" rowspan="2" style="font-size: 11px;">Nombre</th> <th colspan="2">Volumen de negocio</th> <th rowspan="2" class="label-cell nuevo-th" style="font-size: 11px;">Titulo</th> </tr> <tr> <th class="nuevo-td" style="font-size: 11px;">Individual</th> <td class="label-cell nuevo-th" style="font-size: 11px;">Red</td> </tr> </thead> <tbody id="listado_volumen_negocio" class="listado_volumen_negocio"> <tr class="tdoculto"> <td rowspan="2" style="font-size: 11px;">Nombre</td> <td colspan="2">Volumen de negocio</td> <td rowspan="2" class="label-cell nuevo-th" style="font-size: 11px;">Titulo</td> </tr> <tr class="tdoculto"> <td class="nuevo-td" style="font-size: 11px;">Individual</td> <td class="label-cell nuevo-th" style="font-size: 11px;">Red</td> </tr> </tbody> </table> </div> <!-- end snippet -->