Html 当用户使用 jQuery 将表头滚动到视图之外时，表头保持固定在顶部

发布于01月17日

我正在try 设计一个HTML表格，当且仅当用户将页眉滚动出视图时，页眉才会留在页面顶部.例如，表格可能离页面500个像素，我如何才能使其在用户将标题滚动出视图(浏览器检测到其不再位于窗口视图中)时保持在顶部？有人能给我一个Javascript解决方案吗？

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
  </tbody>
</table>

因此，在上面的示例中，我希望<thead>在页面离开视图时与页面一起滚动.

重要提示:我正在寻找一个解决方案，其中<tbody>将有一个滚动条(溢出:自动).

推荐答案

您可以这样做，方法是点击window上的scroll事件处理程序，然后使用另一个固定位置的table在页面顶部显示页眉.

HTML:个

<table id="header-fixed"></table>

CSS:个

#header-fixed {
    position: fixed;
    top: 0px; display:none;
    background-color:white;
}

JavaScript:个

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();

    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});

当用户向下滚动到足以隐藏原始表头时，这将显示表头.当用户再次将页面向上滚动足够远时，它将再次隐藏.

工作示例:http://jsfiddle.net/andrewwhitaker/fj8wM/

Html相关问答推荐

Html 当用户使用 jQuery 将表头滚动到视图之外时，表头保持固定在顶部

推荐答案

Html相关问答推荐

Flexbox响应式图像不会缩小

如何增加行背景的宽度而不影响上面的内容？""' HTML CSS

输入表单在奇怪的地方舍入的标签

为什么这个高度为100%的页面会出现滚动条？

动态FormControl值在Angular 上绑定错误的问题

调整一组IMG的大小以适应容器DIV

在将DevExtreme升级到版本23.2之后，到处都会生成一个Pesudo类，我在其中使用了<；DXi-Item Title=&Quot；&Quot；>；

CSS中的转换属性是如何工作的？

div居中碰撞问题

如何防止弹性项目溢出容器？

如何实现与内嵌图像对齐的自动换行？

如何使用jQuery将我制作的通用头部和底部加载到多个HTML文件中？

动态计算高度时 Div 不保持 1/1 纵横比

HTML、CSS设计图像出格

有没有办法在 Flutter 中创建这个浮动标签表单？

如何制作一个布局，其中左侧固定为图像，右侧为按钮，中心或中间位置为文本？

如何在div中设计伪元素？

嵌套固定定位的 Div 滚动条渗透到前景中的 Div

如何使列表的第一个元素比 css 中的其他元素大？

禁用的 Select 标签没有在 chrome 上的 css 中指定的 colored颜色