在SAPUI5应用程序中，我们经常直接或通过sap.ui.comp公司.smarttable.智能表.

其中一个问题是，当我们滚动时，如何使标题工具栏和表格标题保持在顶部。

在下图中，您可以看到当我们在具有智能表格和sap.m.table作为它的包含实例的表。

但是我们期望的是在滚动时将自定义工具栏和表头都放在顶部。

自从SAPUI5的1.54版本以来，您可以使用sap.m.table的粘滞属性，然后将表头保持在顶部。目前这个属性只接受2个值。

然后我们在滚动时会有这样的结果：

很好，家庭人工智能，比上一个更好，大数据app，我们在顶部没有标题。但如果用户想使用工具栏内的按钮，需要向下滚动，然后选择行，然后向上滚动以使用工具栏内的按钮。

让我们更深入地了解在使用此属性时添加到html dom元素中的内容：

实际上，一个名为sapMListTblStickyColHdr的css类已添加到表头。在css部分，我们有这些：

因此我们可以使用相同的想法保持我们的smartTable的自定义工具栏在顶部。然后，物联网传感器，让我们添加一些自定义css，并将一个自定义css类添加到自定义工具栏：

和通常放置在样式.css文件必须有：

请注意，我们将z索引指定给101（比我们在sapMListTblStickyColHdr类中看到的多一个值）。

但它仍然不起作用，原因是类已分配给更深的dom元素。如果我们把它分配给它的父级，所有的都可以工作。

所以我们将使用智能表的onAfterRendering事件将css类分配给工具栏的父级。如果您注意到，我们为自定义工具栏分配了一个id，然后我们将使用该id检索它。

正如您在上面的代码中看到的，我们找到了自定义工具栏的父dom元素。（在上图中，大数据入门，它是一个以"\uu data28"作为id的div）。结果是：

好的，不错。但现在我们有另一个问题。我们可以保持自定义工具栏在顶部，但正如我们看到的标题将隐藏在自定义工具栏下，只要我们滚动（黄色突出显示在上图）。原因是由于表头的top属性。实际上，它也将停留在顶部，云计算与大数据，但在自定义工具栏下，因为它有较小的z索引。如果您想查看它，只需将stickyToolbar的z索引更改为小于100的值。您可以在这里看到此更改的结果：

是的，现在您可以看到表格的标题移动到顶部的位置，在Y轴上移动到0点。让我们再次将z索引返回到101。实际上，我们必须将表头的top属性设置为一个值，该值等于运行时自定义工具栏的外部高度。

为此，我们只需删除sap.m.table实例的sticky属性，然后在运行时生成一个自定义css，并在表的afterRendering事件中分配它。步骤如下：

如您所见，我们在运行时向页面的head标签添加了一个新的样式元素。我知道这是不推荐的，但它是最好的地方添加样式标签，以便能够删除它为下一次，我们需要改变顶部属性的基础上，另一个渲染情况（高度的自定义工具栏可以不同）。

这里是最后的结果：

我希望你觉得这篇文章有用。