Javascript 单击滚动显示一个表标题（类似于冻结标题），其中包含所有绑定和动态组件

您好，我有以下视图模型：

function PeopleViewModel()
{

  var people=this;
  people.people=ko.observableArray([
    new Person({name:"John",surname:"Doe",gender:"Male"}),
    new Person({name:"Kurosaki",surname:"Ichigo",gender:"Male"}),
    new Person({name:"Luffy",surname:"Monkey D.",gender:"Male"}),
    new Person({name:"Inoue",surname:"Orihime",gender:"Female"}),
    ......
    new Person({name:"Gus",surname:"G",gender:"Male"}),
  ]);


  people.whatToSort=ko.observable('name')
  people.ascending=ko.observable(false);

  var sortFunc=function(a,b)
  {
    switch(people.whatToSort())
    {
      case 'name':
      a=a.name;
      b=b.name;

      case 'surname':
      default:
      a=a.surname;
      b=b.surname;
    }

    if(!people.ascending())//Swap if desceding
    {
      var temp=b;
      b=a;
      a=temp;
    }

    if(typeof a ==='undefined' || typeof b === 'undefined') return 0;
    return ( ( a() == b() ) ? 0 : ( ( a() > b() ) ? 1 : -1 ) );
  };

  people.sortSurname=function()
  {
    people.whatToSort('surname');
    people.ascending(!people.ascending());
  };

  people.sortName=function()
  {
    people.whatToSort('name');
    people.ascending(!people.ascending());
  }

  people.sortSurname=function()
  {
    people.whatToSort('surname');
    people.ascending(!people.ascending());
  };

  people.sortedPeople=ko.pureComputed(function()
  {
    return people.people().sort(sortFunc);
  })
}

function Person(data)
{
  var person=this;

  person.name=ko.observable(data.name);
  person.surname=ko.observable(data.surname);
  person.gender=ko.observable(data.gender)
}

下面的html将显示它们：

<table>
<thead>
<th data-bind="click:sortSurname">
  Surname
  <span >
    <!-- ko if:whatToSort() == 'surname'-->
      <i class="fa fa-caret-up" data-bind="visible:ascending"></i>
      <i class="fa fa-caret-down" data-bind="visible:!ascending()"></i>
    <!-- /ko -->
    <!-- ko ifnot:whatToSort() == 'surname'-->
      <i class="fa fa-sort fa-pos-conf" ></i>
    <!-- /ko -->
  </span>
</th>
<th data-bind="click:sortName">
   Name
  <span >
    <!-- ko if:whatToSort() == 'name'-->
      <i class="fa fa-caret-up" data-bind="visible:ascending"></i>
      <i class="fa fa-caret-down" data-bind="visible:!ascending()"></i>
    <!-- /ko -->
    <!-- ko ifnot:whatToSort() == 'name'-->
      <i class="fa fa-sort fa-pos-conf" ></i>
    <!-- /ko -->
  </span>
</th>

</thead>

<tbody data-bind="foreach:sortedData">
  <td data-bind="text:surname"></td>
  <td data-bind="text:name"></td>
  <td data-bind="text:genger"></td>
</tbody>
</table>

姓
名称

但是，因为我显示的数据太多，所以我希望显示包含所有绑定的表头并使其正常工作。当我向下滚动n个表格后向下滚动

更具体地说，我想做一些库和许多其他类似库喜欢做的事情，但是当表的AD部分的html由于绑定而更改时，它们是无用的，因为它们不会动态获取更改后的html

更具体地说，我希望当我单击“姓氏”时，能够再次按姓氏排序，并显示排序函数的箭头

因此，我需要在另一个div上重写表的部分，并使用自定义绑定来显示它。或者使用具有相同html头的div，如下所示：

<div style="z-index:99999999">
    <table>
    <thead>
    <th data-bind="click:sortSurname">
      Surname
      <span >
        <!-- ko if:whatToSort() == 'surname'-->
          <i class="fa fa-caret-up" data-bind="visible:ascending"></i>
          <i class="fa fa-caret-down" data-bind="visible:!ascending()"></i>
        <!-- /ko -->
        <!-- ko ifnot:whatToSort() == 'surname'-->
          <i class="fa fa-sort fa-pos-conf" ></i>
        <!-- /ko -->
      </span>
    </th>
    <th data-bind="click:sortName">
       Name
      <span >
        <!-- ko if:whatToSort() == 'name'-->
          <i class="fa fa-caret-up" data-bind="visible:ascending"></i>
          <i class="fa fa-caret-down" data-bind="visible:!ascending()"></i>
        <!-- /ko -->
        <!-- ko ifnot:whatToSort() == 'name'-->
          <i class="fa fa-sort fa-pos-conf" ></i>
        <!-- /ko -->
      </span>
    </th>

    </thead>
</table>
</div>

姓
名称

或者使用模板。但还是没有我想要的那么干

---

我想要的是能够传递一个自定义绑定处理程序，动态地将html复制到另一个div，当它滚动显示这个div时。你知道怎么做吗？

你看到了吗？没有，但现在我看到了，它对我没有帮助，因为我想要一些在工作方式上更“神奇”的东西。