CSS 冻结头部直到不相关(HTML，CSS和JS)

在本文中，我们将介绍如何使用https://sotoolbox.com/tag/css target="_blank" rel="nofollow">HTML，CSS和JS来冻结网页表格的头部，直到它不再与视口相关。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

1. 按需加载和冻结头部

一个常见的需求是在处理大型表格时，让表格头部保持可见，即使用户滚动网页。这可以通过将表格分为标题和内容两个部分来实现。标题部分将被冻结在页面顶部，而内容部分会随着用户的滚动而滚动。

HTML 结构

首先，我们需要在HTML中创建一个表格，并将其分为标题和内容部分。我们可以使用<thead>来定义标题部分，<tbody>来定义内容部分。

<table>
    <thead>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
            <th>列4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>行1 列1</td>
            <td>行1 列2</td>
            <td>行1 列3</td>
            <td>行1 列4</td>
        </tr>
        <!-- 其他行省略 -->
    </tbody>
</table>

CSS 样式

然后，我们可以使用CSS来设置标题部分的样式，并使其在滚动时保持固定。我们可以设置标题部分的position属性为fixed，并使用适当的样式来保证其显示在页面顶部。

thead {
    position: fixed;
    top: 0;
    background-color: #fff;
    /* 其他样式 */
}

JavaScript 动态计算宽度

接下来，我们需要使用JavaScript来动态计算内容部分的宽度，并将其应用于标题部分。我们可以使用Element.getBoundingClientRect()方法来获取内容部分的宽度，并将其应用于标题部分。

window.addEventListener('load', function() {
    var header = document.querySelector('thead');
    var content = document.querySelector('tbody');

    function setHeaderWidth() {
        var rect = content.getBoundingClientRect();
        header.style.width = rect.width + "px";
    }

    window.addEventListener('resize', setHeaderWidth);
    setHeaderWidth();
});

现在，当用户滚动网页时，表格的标题部分将始终保持可见，并且内容部分将正常滚动。

2. 滚动到一定位置后冻结头部

除了按需加载和冻结头部外，有时我们希望在用户滚动到一定位置后才冻结表格的头部。这可以通过使用JS来实现。

HTML 结构

在HTML中，我们仍然需要将表格分为标题和内容部分。

<table>
    <thead>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
            <th>列4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>行1 列1</td>
            <td>行1 列2</td>
            <td>行1 列3</td>
            <td>行1 列4</td>
        </tr>
        <!-- 其他行省略 -->
    </tbody>
</table>

CSS 样式

我们可以使用CSS来设置标题部分的样式，并使其在用户滚动到一定位置后将其固定在页面顶部。

thead {
    position: sticky;
    top: 100px; /* 需要根据实际需求调整 */
    background-color: #fff;
    /* 其他样式 */
}

JavaScript 滚动事件

然后，我们需要使用JavaScript来监听滚动事件，并根据滚动位置来冻结或取消冻结标题部分。

window.addEventListener('scroll', function() {
    var header = document.querySelector('thead');
    var rect = header.getBoundingClientRect();

    if (window.pageYOffset >= rect.top) {
        header.classList.add('fixed'); // 添加CSS类名
    } else {
        header.classList.remove('fixed'); // 移除CSS类名
    }
});

CSS 类名样式

最后，我们可以设置一个CSS类名来控制标题部分的样式，以便在需要时将其固定在页面顶部。

thead.fixed {
    position: fixed;
    top: 0;
    z-index: 1;
    /* 其他样式 */
}

现在，当用户滚动到指定位置后，表格的标题部分将被冻结在页面顶部。

总结

通过使用https://sotoolbox.com/tag/css target="_blank" rel="nofollow">HTML，CSS和JS，我们可以实现冻结网页表格的标题部分，直到它不再与视口相关。我们可以按需加载和冻结头部，或者在滚动到一定位置后冻结头部。这些技术可以在处理大型表格时提供更好的用户体验，并提取用户关注的内容。希望本文对你有所帮助！