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

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.css("opacity", 0);  // Fade out price elements
                setTimeout(() => {
                $thead.css("height", initialHeaderHeight * 0.7); // Reduce height
                }, 500);
            } else {
                $priceDivs.css("opacity", 1);   // Fade in price elements
                setTimeout(() => {
                $thead.css("height", initialHeaderHeight); // Restore height
                }, 500);
            }
            });

.matrix-container {
                position: relative;
                padding-top: 100px;
            }

            table {
                width: 100%;
            }

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<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>