Skip to main content
se añadieron 207 caracteres en el cuerpo
Origen Enlace
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88
//$('.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/>''<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");

  }
}
/* 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;
}
<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>
//$('.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");

  }
}
/* 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;
}
<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>
    </tbody>
  </table>
</div>
//$('.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");

  }
}
/* 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;
}
<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>
Origen Enlace
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88

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.

//$('.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");

  }
}
/* 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;
}
<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>
    </tbody>
  </table>
</div>