我怎样才能 position 我的表 header 在滚动底部？

Question

这是我的桌子：

<table class="table tableOnScroll">
   <thead class="mobile-head-table">
         <tr>
             <td class="mobile-header-product-item-0">
                    <div class="product-item-image hideImage">
                            <div class="is-size-7 cross-sell-flag px-2 py-1 new-product-flag">
                                <p>popular</p>
                            </div>
                        <figure class="image is-4by5">
                            <img src="">
                        </figure>
                    </div>
                    <div class="promotion hidePromo">
                        <p>15% OFF with Mattress Purchase!</p>
                    </div>
                    <p class="product-name">Adjustable Memory Foam Pillow</p>
                    <div class="product-pricing">
                        <p>From</p>
                        <p class="price">79</p>

                        <div class="content is-flex mt-3">
                            <a href="" class="button is-fullwidth">
        SHOP NOW            </a>
                        </div>
                    </div>
                </td>
                <td class="mobile-header-product-item-1">
                    <div class="product-item-image hideImage">
                            <div class="is-size-7 cross-sell-flag px-2 py-1 on-sale-flag">
                                <p>BEST SELLER</p>
                            </div>
                        <figure class="image is-4by5">
                            <img src="">
                        </figure>
                    </div>
                    <div class="promotion hidePromo">
                        <p>15% OFF with Mattress Purchase!</p>
                    </div>
                    <p class="product-name">Cooling Gel Memory Foam Pillow</p>
                    <div class="product-pricing">
                        <p>From</p>
                        <p class="price">89</p>

                        <div class="content is-flex mt-3">
                            <a href="" class="button is-fullwidth">
        SHOP NOW            </a>
                        </div>
                    </div>
                </td>
            </tr>
        </thead>

        <tbody class="mobile-body-table">
            <tr class="summary is-flex-touch is-hidden-desktop">
                <td class="side-header is-flex">
                    <div class="header-text">
                    <h1>Summary</h1></div>
                </td>
            <td>
                                <div class="markdown-wrapper">
                                    An ultra-breathable memory foam pillow with a soft, responsive, cooling design. Over 50,000 sold!                                   </div>
                            </td><td>
                                <div class="markdown-wrapper">
                                    Enjoy the support and cushioning of memory foam with next-level cooling.                                    </div>
                            </td></tr>
        <tr class="feature is-flex-touch is-hidden-desktop"><td class="side-header is-flex"><div class="header-text"><img src="">Warranty</div><div class="header-summary"><p>Guaranteed worry free sleep with Douglas Pillow</p></div></td><td>
            <div class="markdown-wrapper">
                <h3>3</h3> 

<p>Years</p>

            </div>
        </td><td>
            <div class="markdown-wrapper">
                <h3>4</h3> 

<p>Years</p>

            </div>
        </td></tr><tr class="feature is-flex-touch is-hidden-desktop"><td class="side-header is-flex"><div class="header-text"><img src="">Free Shipping &amp; Returns</div><div class="header-summary"><p>Your Douglas Pillow will be delivered free of charge</p></div></td><td>
            <div class="markdown-wrapper">
                <p><img src=""></p>

<p>Included</p>

            </div>
        </td><td>
            <div class="markdown-wrapper">
                <p><img src=""></p>

<p>Included</p>

            </div>
        </td></tr><tr class="feature is-flex-touch is-hidden-desktop"><td class="side-header is-flex"><div class="header-text"><img src="">Coolness</div></td><td>
            <div class="markdown-wrapper">
                <p><img src=""></p>

            </div>
        </td><td>
            <div class="markdown-wrapper">
                <p><img src=""></p>

<p>Single action graphic</p>

            </div>
        </td></tr>
        </tbody>

        <tfoot class="mobile-footer-table">
            <tr>
                <td class="side-header">
                    Other Features                  </td>
                <td>
                                        <p>Adjustable Firmness</p>

                                        <p>Supportive</p>

                                        <p>Fit all pillows</p>

                                        <p>Back Sleepers</p>

                                        <p>Side Sleepers</p>

                                        <p>Cooling Technology</p>

                                        <p>Improved Memory Foam</p>

                                        <p>Improved Memory Foam</p>

                                    </td>
            </tr>
        </tfoot>            
</table>

我试过这个 css

thead {
 position: sticky;
 bottom: 0;
 z-index: 99;
}

这根本不起作用所以我尝试了这个

thead {
 position: fixed;
 bottom: 0;
 z-index: 99;
} 

它有效，但唯一的问题是，一旦表格的内容完成并且其他部分开始出现时，thead 的 position 保持不变，这是有道理的。

我要么希望表 header 粘在滚动底部并在其他内容出现时立即消失，要么提供第二个 css 代码，如果可以在其他部分开始出现时再次重置 position。

任何帮助，将不胜感激。 谢谢！

Answer 1

给元素添加js：

 const header = document.getElementById("headerid"); onScroll() { header.style.position = "static" console.log("Changed Position") }

给header添加一个id为headerid ，然后设置元素的onScroll属性运行function的onScroll()，将position变为正常。 要执行相反的操作，请复制 function 并将“static”更改为“fixed”并添加行header.style.bottom = 0; . 希望这能解决您的问题！