使用jQuery将用户滚动查看时，表头保持固定在顶部 [英] Table header to stay fixed at the top when user scrolls it out of view with jQuery

问题描述

我试图设计一个HTML表格，当用户将它滚动到视图外时，标题将停留在页面的顶部。例如，表格可能会从页面向下500像素，我如何制作它以便如果用户将标题从视图中滚动出来（浏览器不再在窗口视图中检测到它），它将保持在顶部？任何人都可以给我一个Javascript解决方案吗？

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

所以在上面的例子中，我想要< thead> <
$ b

重要提示：我不是寻找解决方案，其中< tbody> 将有一个滚动条（overflow：auto）。 p>您可以通过点击窗口上的滚动事件处理程序并使用另一个<$ c $ b> b


HTML：：$ c> table ，并在页面顶部显示标题。

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

CSS：

 ＃header-fixed {
 position：fixed; 
 top：0px;显示：无; 
背景颜色：白色; 
 
  

JavaScript：

  var tableOffset = $（＃table-1）。offset（）。top; 
 var $ header = $（＃table-1> thead）。clone（）; 
 var $ fixedHeader = $（＃header-fixed）。append（$ header）; 
 $ b $（window）.bind（scroll，function（）{
 var offset = $（this）.scrollTop（）; 
 
 if（offset > = tableOffset& $ amp; $ fixedHeader.is（：hidden））{
 $ fixedHeader.show（）; 
} 
 else if（offset< tableOffset）{
 $ fixedHeader.hide（）; 
} 
}）; 
  

当用户向下滚动到足以隐藏原始表头时，会显示表头。当用户再次向上滚动页面时，它会再次隐藏。

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

I am trying to design an HTML table where the header will stay at the top of the page when AND ONLY when the user scrolls it out of view. For example, the table may be 500 pixels down from the page, how do I make it so that if the user scrolls the header out of view (browser detects its no longer in the windows view somehow), it will stay put at the top? Anyone can give me a Javascript solution to this?

<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>

So in the above example, I want the <thead> to scroll with the page if it goes out of view.

IMPORTANT: I am NOT looking for a solution where the <tbody> will have a scrollbar (overflow:auto).

解决方案

You would do something like this by tapping into the scroll event handler on window, and using another table with a fixed position to show the header at the top of the page.

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();
    }
});

This will show the table head when the user scrolls down far enough to hide the original table head. It will hide again when the user has scrolled the page up far enough again.

Working example: http://jsfiddle.net/andrewwhitaker/fj8wM/

这篇关于使用jQuery将用户滚动查看时，表头保持固定在顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！