Thiết kế website giá rẻ

Question

I am working on a web page that includes a table with a sticky header, specifically the section as shown below:

const $tableContainer = $('.matrix-container');
const $table = $tableContainer.find('table');
const $priceDivs = $('.price');
const $thead = $table.find('thead');

$thead.css('height', 'auto');

// Capture the initial height after setting it to auto to ensure it's computed correctly
var initialHeaderHeight = $thead.height();

$(window).scroll(function() {
  const tableRect = $table[0].getBoundingClientRect();
  if (tableRect.top <= 0 && tableRect.bottom >= 0) {
    $priceDivs.hide(500);
    setTimeout(() => {
      $thead.css('height', initialHeaderHeight * 0.7); // Reduce 70% of the height
    }, 500);
  } else {
    $priceDivs.show(500);
    setTimeout(() => {
      $thead.css('height', initialHeaderHeight); // Restore to initial height
    }, 500);
  }
});

.matrix-container {
  position: relative;
  padding-top: 100px;
  /* To ensure the table is not at the top of the viewport initially */
}

table {
  width: 100%;
}

thead {
  background-color: #f9f9f9;
  position: sticky;
  top: 0;
  transition: height 1s ease-in-out;
}

.price {
  display: block;
  margin-bottom: 20px;
  background-color: #f0f0f0;
  padding: 10px;
  transition: opacity 1s ease-in-out;
}

.text {
  margin-top: 150px;
  margin-bottom: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>
  <div class="matrix-container">
    <table>
      <thead>
        <tr>
          <th>
            Header 1
            <div class="price">Price</div>
            <div class="details">Details</div>
            <div class="button">
              <button>Clcik</button>
            </div>
          </th>
          <th>
            Header 2
            <div class="price">Price</div>
            <div class="details">Details</div>
            <div class="button">
              <button>Clcik</button>
            </div>
          </th>
          <th>
            Header 3
            <div class="price">Price</div>
            <div class="details">Details</div>
            <div class="button">
              <button>Clcik</button>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <!-- Add more rows as needed -->
      </tbody>
    </table>
  </div>
  <div class="text-container">
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales lorem libero, a egestas enim faucibus non. Nullam tincidunt hendrerit faucibus. Vestibulum laoreet nulla in odio bibendum, vel facilisis ligula mattis. Proin a neque ullamcorper, bibendum
      purus sit amet, vulputate elit. Curabitur hendrerit purus velit, varius luctus sem aliquam non. Aenean porttitor interdum orci, ac sodales lorem facilisis a. Etiam scelerisque nunc mauris, at gravida risus venenatis vel. Class aptent taciti sociosqu
      ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget ligula pretium, iaculis nisi non, pretium risus. Duis eu accumsan erat. Aenean mollis ut dolor id tincidunt. Praesent in risus sit amet leo auctor venenatis. Etiam aliquam
      quis nisl eu mollis. Pellentesque non diam sed neque finibus sollicitudin sed non neque. Sed vitae augue libero. Sed eu feugiat eros. Aliquam elementum feugiat arcu sed mattis. Nunc vestibulum sem nibh, sodales consequat arcu luctus ac. Ut tortor
      turpis, ultrices quis pulvinar at, rutrum ut arcu. Integer dapibus erat ante, vitae laoreet est sagittis et. Sed feugiat scelerisque risus, a mattis justo placerat ac. Sed blandit lorem quis urna hendrerit, nec ultricies erat molestie. Vivamus tempor
      sapien quis lacus bibendum tempor. Mauris lacinia interdum scelerisque. Vivamus at elit quis urna aliquet gravida eget a dui. Aenean et pharetra nisi, eget euismod augue. Duis mauris leo, convallis pretium nulla vitae, finibus porttitor diam. Cras
      nisl massa, volutpat fringilla leo ac, dictum laoreet tortor. Donec rhoncus porta eleifend. Vivamus placerat tortor at ipsum volutpat, in mollis nulla facilisis. Aenean pharetra dui at convallis ultricies. Maecenas fringilla sit amet neque at facilisis.
      In blandit, turpis eu aliquam lobortis, arcu nisl tempor tortor, nec tristique odio diam sed velit. Fusce luctus lectus neque, ac hendrerit massa hendrerit ac. Aenean diam tortor, volutpat in sollicitudin faucibus, congue ut quam. Donec fringilla
      imperdiet eros vel auctor. Nulla quis risus placerat, commodo quam vitae, elementum lacus. Maecenas vulputate scelerisque diam, at ornare justo imperdiet non. In venenatis tortor eget ante semper, sed commodo purus posuere. Suspendisse lobortis
      dapibus massa, at malesuada diam vestibulum a. Nam nisl sem, consequat non risus ultricies, consectetur varius massa. In nec nulla eget erat rutrum consectetur. Sed molestie rhoncus lorem quis finibus. Phasellus aliquet leo nec enim luctus facilisis.
      Mauris sodales porta vehicula. Quisque pharetra, justo tincidunt pharetra aliquet, arcu mauris consequat turpis, ut commodo nisl odio nec urna. Sed faucibus elit a enim ullamcorper congue. Ut ultricies ante eu dolor facilisis aliquet. Sed odio ligula,
      tristique ac auctor et, commodo ut tortor. Curabitur pellentesque metus nec libero auctor, id vehicula dolor iaculis. Donec eu libero pellentesque, efficitur tellus ac, pretium ex. Nulla interdum nisi eu ipsum porta, vitae maximus nisl fringilla.
      Nullam lobortis elit arcu, quis vestibulum mauris auctor eget. Nunc blandit neque eget tellus faucibus laoreet. Suspendisse ullamcorper massa eu tortor tristique, non cursus urna volutpat. Phasellus eu interdum lacus. Mauris arcu risus, hendrerit
      vitae nisl at, rhoncus porta ante. Sed ac arcu quis velit consectetur placerat et a arcu. Phasellus rutrum metus sodales velit ultrices, eu varius tellus sollicitudin. Praesent tincidunt justo pellentesque urna sollicitudin porta. In accumsan magna
      id bibendum blandit. Aliquam fringilla felis in velit lobortis commodo et ac lectus. Vivamus eget ex a risus tempor consectetur. Phasellus molestie ligula lacus, ac imperdiet nulla fermentum non.
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales lorem libero, a egestas enim faucibus non. Nullam tincidunt hendrerit faucibus. Vestibulum laoreet nulla in odio bibendum, vel facilisis ligula mattis. Proin a neque ullamcorper, bibendum
      purus sit amet, vulputate elit. Curabitur hendrerit purus velit, varius luctus sem aliquam non. Aenean porttitor interdum orci, ac sodales lorem facilisis a. Etiam scelerisque nunc mauris, at gravida risus venenatis vel. Class aptent taciti sociosqu
      ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget ligula pretium, iaculis nisi non, pretium risus. Duis eu accumsan erat. Aenean mollis ut dolor id tincidunt. Praesent in risus sit amet leo auctor venenatis. Etiam aliquam
      quis nisl eu mollis. Pellentesque non diam sed neque finibus sollicitudin sed non neque. Sed vitae augue libero. Sed eu feugiat eros. Aliquam elementum feugiat arcu sed mattis. Nunc vestibulum sem nibh, sodales consequat arcu luctus ac. Ut tortor
      turpis, ultrices quis pulvinar at, rutrum ut arcu. Integer dapibus erat ante, vitae laoreet est sagittis et. Sed feugiat scelerisque risus, a mattis justo placerat ac. Sed blandit lorem quis urna hendrerit, nec ultricies erat molestie. Vivamus tempor
      sapien quis lacus bibendum tempor. Mauris lacinia interdum scelerisque. Vivamus at elit quis urna aliquet gravida eget a dui. Aenean et pharetra nisi, eget euismod augue. Duis mauris leo, convallis pretium nulla vitae, finibus porttitor diam. Cras
      nisl massa, volutpat fringilla leo ac, dictum laoreet tortor. Donec rhoncus porta eleifend. Vivamus placerat tortor at ipsum volutpat, in mollis nulla facilisis. Aenean pharetra dui at convallis ultricies. Maecenas fringilla sit amet neque at facilisis.
      In blandit, turpis eu aliquam lobortis, arcu nisl tempor tortor, nec tristique odio diam sed velit. Fusce luctus lectus neque, ac hendrerit massa hendrerit ac. Aenean diam tortor, volutpat in sollicitudin faucibus, congue ut quam. Donec fringilla
      imperdiet eros vel auctor. Nulla quis risus placerat, commodo quam vitae, elementum lacus. Maecenas vulputate scelerisque diam, at ornare justo imperdiet non. In venenatis tortor eget ante semper, sed commodo purus posuere. Suspendisse lobortis
      dapibus massa, at malesuada diam vestibulum a. Nam nisl sem, consequat non risus ultricies, consectetur varius massa. In nec nulla eget erat rutrum consectetur. Sed molestie rhoncus lorem quis finibus. Phasellus aliquet leo nec enim luctus facilisis.
      Mauris sodales porta vehicula. Quisque pharetra, justo tincidunt pharetra aliquet, arcu mauris consequat turpis, ut commodo nisl odio nec urna. Sed faucibus elit a enim ullamcorper congue. Ut ultricies ante eu dolor facilisis aliquet. Sed odio ligula,
      tristique ac auctor et, commodo ut tortor. Curabitur pellentesque metus nec libero auctor, id vehicula dolor iaculis. Donec eu libero pellentesque, efficitur tellus ac, pretium ex. Nulla interdum nisi eu ipsum porta, vitae maximus nisl fringilla.
      Nullam lobortis elit arcu, quis vestibulum mauris auctor eget. Nunc blandit neque eget tellus faucibus laoreet. Suspendisse ullamcorper massa eu tortor tristique, non cursus urna volutpat. Phasellus eu interdum lacus. Mauris arcu risus, hendrerit
      vitae nisl at, rhoncus porta ante. Sed ac arcu quis velit consectetur placerat et a arcu. Phasellus rutrum metus sodales velit ultrices, eu varius tellus sollicitudin. Praesent tincidunt justo pellentesque urna sollicitudin porta. In accumsan magna
      id bibendum blandit. Aliquam fringilla felis in velit lobortis commodo et ac lectus. Vivamus eget ex a risus tempor consectetur. Phasellus molestie ligula lacus, ac imperdiet nulla fermentum non.
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales lorem libero, a egestas enim faucibus non. Nullam tincidunt hendrerit faucibus. Vestibulum laoreet nulla in odio bibendum, vel facilisis ligula mattis. Proin a neque ullamcorper, bibendum
      purus sit amet, vulputate elit. Curabitur hendrerit purus velit, varius luctus sem aliquam non. Aenean porttitor interdum orci, ac sodales lorem facilisis a. Etiam scelerisque nunc mauris, at gravida risus venenatis vel. Class aptent taciti sociosqu
      ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget ligula pretium, iaculis nisi non, pretium risus. Duis eu accumsan erat. Aenean mollis ut dolor id tincidunt. Praesent in risus sit amet leo auctor venenatis. Etiam aliquam
      quis nisl eu mollis. Pellentesque non diam sed neque finibus sollicitudin sed non neque. Sed vitae augue libero. Sed eu feugiat eros. Aliquam elementum feugiat arcu sed mattis. Nunc vestibulum sem nibh, sodales consequat arcu luctus ac. Ut tortor
      turpis, ultrices quis pulvinar at, rutrum ut arcu. Integer dapibus erat ante, vitae laoreet est sagittis et. Sed feugiat scelerisque risus, a mattis justo placerat ac. Sed blandit lorem quis urna hendrerit, nec ultricies erat molestie. Vivamus tempor
      sapien quis lacus bibendum tempor. Mauris lacinia interdum scelerisque. Vivamus at elit quis urna aliquet gravida eget a dui. Aenean et pharetra nisi, eget euismod augue. Duis mauris leo, convallis pretium nulla vitae, finibus porttitor diam. Cras
      nisl massa, volutpat fringilla leo ac, dictum laoreet tortor. Donec rhoncus porta eleifend. Vivamus placerat tortor at ipsum volutpat, in mollis nulla facilisis. Aenean pharetra dui at convallis ultricies. Maecenas fringilla sit amet neque at facilisis.
      In blandit, turpis eu aliquam lobortis, arcu nisl tempor tortor, nec tristique odio diam sed velit. Fusce luctus lectus neque, ac hendrerit massa hendrerit ac. Aenean diam tortor, volutpat in sollicitudin faucibus, congue ut quam. Donec fringilla
      imperdiet eros vel auctor. Nulla quis risus placerat, commodo quam vitae, elementum lacus. Maecenas vulputate scelerisque diam, at ornare justo imperdiet non. In venenatis tortor eget ante semper, sed commodo purus posuere. Suspendisse lobortis
      dapibus massa, at malesuada diam vestibulum a. Nam nisl sem, consequat non risus ultricies, consectetur varius massa. In nec nulla eget erat rutrum consectetur. Sed molestie rhoncus lorem quis finibus. Phasellus aliquet leo nec enim luctus facilisis.
      Mauris sodales porta vehicula. Quisque pharetra, justo tincidunt pharetra aliquet, arcu mauris consequat turpis, ut commodo nisl odio nec urna. Sed faucibus elit a enim ullamcorper congue. Ut ultricies ante eu dolor facilisis aliquet. Sed odio ligula,
      tristique ac auctor et, commodo ut tortor. Curabitur pellentesque metus nec libero auctor, id vehicula dolor iaculis. Donec eu libero pellentesque, efficitur tellus ac, pretium ex. Nulla interdum nisi eu ipsum porta, vitae maximus nisl fringilla.
      Nullam lobortis elit arcu, quis vestibulum mauris auctor eget. Nunc blandit neque eget tellus faucibus laoreet. Suspendisse ullamcorper massa eu tortor tristique, non cursus urna volutpat. Phasellus eu interdum lacus. Mauris arcu risus, hendrerit
      vitae nisl at, rhoncus porta ante. Sed ac arcu quis velit consectetur placerat et a arcu. Phasellus rutrum metus sodales velit ultrices, eu varius tellus sollicitudin. Praesent tincidunt justo pellentesque urna sollicitudin porta. In accumsan magna
      id bibendum blandit. Aliquam fringilla felis in velit lobortis commodo et ac lectus. Vivamus eget ex a risus tempor consectetur. Phasellus molestie ligula lacus, ac imperdiet nulla fermentum non.
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales lorem libero, a egestas enim faucibus non. Nullam tincidunt hendrerit faucibus. Vestibulum laoreet nulla in odio bibendum, vel facilisis ligula mattis. Proin a neque ullamcorper, bibendum
      purus sit amet, vulputate elit. Curabitur hendrerit purus velit, varius luctus sem aliquam non. Aenean porttitor interdum orci, ac sodales lorem facilisis a. Etiam scelerisque nunc mauris, at gravida risus venenatis vel. Class aptent taciti sociosqu
      ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget ligula pretium, iaculis nisi non, pretium risus. Duis eu accumsan erat. Aenean mollis ut dolor id tincidunt. Praesent in risus sit amet leo auctor venenatis. Etiam aliquam
      quis nisl eu mollis. Pellentesque non diam sed neque finibus sollicitudin sed non neque. Sed vitae augue libero. Sed eu feugiat eros. Aliquam elementum feugiat arcu sed mattis. Nunc vestibulum sem nibh, sodales consequat arcu luctus ac. Ut tortor
      turpis, ultrices quis pulvinar at, rutrum ut arcu. Integer dapibus erat ante, vitae laoreet est sagittis et. Sed feugiat scelerisque risus, a mattis justo placerat ac. Sed blandit lorem quis urna hendrerit, nec ultricies erat molestie. Vivamus tempor
      sapien quis lacus bibendum tempor. Mauris lacinia interdum scelerisque. Vivamus at elit quis urna aliquet gravida eget a dui. Aenean et pharetra nisi, eget euismod augue. Duis mauris leo, convallis pretium nulla vitae, finibus porttitor diam. Cras
      nisl massa, volutpat fringilla leo ac, dictum laoreet tortor. Donec rhoncus porta eleifend. Vivamus placerat tortor at ipsum volutpat, in mollis nulla facilisis. Aenean pharetra dui at convallis ultricies. Maecenas fringilla sit amet neque at facilisis.
      In blandit, turpis eu aliquam lobortis, arcu nisl tempor tortor, nec tristique odio diam sed velit. Fusce luctus lectus neque, ac hendrerit massa hendrerit ac. Aenean diam tortor, volutpat in sollicitudin faucibus, congue ut quam. Donec fringilla
      imperdiet eros vel auctor. Nulla quis risus placerat, commodo quam vitae, elementum lacus. Maecenas vulputate scelerisque diam, at ornare justo imperdiet non. In venenatis tortor eget ante semper, sed commodo purus posuere. Suspendisse lobortis
      dapibus massa, at malesuada diam vestibulum a. Nam nisl sem, consequat non risus ultricies, consectetur varius massa. In nec nulla eget erat rutrum consectetur. Sed molestie rhoncus lorem quis finibus. Phasellus aliquet leo nec enim luctus facilisis.
      Mauris sodales porta vehicula. Quisque pharetra, justo tincidunt pharetra aliquet, arcu mauris consequat turpis, ut commodo nisl odio nec urna. Sed faucibus elit a enim ullamcorper congue. Ut ultricies ante eu dolor facilisis aliquet. Sed odio ligula,
      tristique ac auctor et, commodo ut tortor. Curabitur pellentesque metus nec libero auctor, id vehicula dolor iaculis. Donec eu libero pellentesque, efficitur tellus ac, pretium ex. Nulla interdum nisi eu ipsum porta, vitae maximus nisl fringilla.
      Nullam lobortis elit arcu, quis vestibulum mauris auctor eget. Nunc blandit neque eget tellus faucibus laoreet. Suspendisse ullamcorper massa eu tortor tristique, non cursus urna volutpat. Phasellus eu interdum lacus. Mauris arcu risus, hendrerit
      vitae nisl at, rhoncus porta ante. Sed ac arcu quis velit consectetur placerat et a arcu. Phasellus rutrum metus sodales velit ultrices, eu varius tellus sollicitudin. Praesent tincidunt justo pellentesque urna sollicitudin porta. In accumsan magna
      id bibendum blandit. Aliquam fringilla felis in velit lobortis commodo et ac lectus. Vivamus eget ex a risus tempor consectetur. Phasellus molestie ligula lacus, ac imperdiet nulla fermentum non.
    </div>
  </div>
</body>

</html>

Inside this header, there’s a price div that I want to hide when the user scrolls over the table. Additionally, I’m trying to reduce the height of the header during the scroll to ensure it doesn’t obscure too much of the table content below.

The given code is working, hiding the price div and reducing the header’s height. However, these changes are not smooth, and I’m encountering an issue where the entire table shakes or gets jittered when these changes occur, leading to a poor user experience. How can I make this smooth so that the price will be hidden smoothly and the header height will be reduced as smoothly as possible?

I have added the extra text (Lorem Ipsum) here to showcase the page structure.

Thanks in advance.

Thiết kế website giá rẻ

Danh mục

How to smoothly hide table header information and adjust height of table header on scroll with jQuery?