在滚动期间，标题/工具栏在页面顶部保持静态

Question

现在在许多网站上，假设您有一个位于页面中间的工具栏/表格标题。 一旦开始滚动，就无法再看到标题或工具栏，因此您无法对您选择的任何行执行操作，或者您无法看到列标题的名称。

许多网站现在都这样做，这很好，当你开始滚动工具栏/标题时，它固定在浏览器的顶部。只有当您向下滚动到标题/工具栏通常不可见的位置时，才会立即发生这种情况。

我该怎么做？这个功能有名称吗？

Gmail有此功能，如果您在阅读电子邮件时向下滚动，则顶部的工具栏会固定在顶部，以便您可以标记/移动/垃圾邮件。

Answer 1

看看jQuery Waypoints - Sticky elements，应该是你想要的。

Answer 2

使用此css：

.static{
  position:fixed;
}

然后，将class="static"放入标题元素。

希望这会有所帮助。干杯

Answer 3

你不需要Javascript来解决这个问题 - 不要让自己变得更难。使用固定定位强制标题到＆＃34;悬停＆＃34;在您的内容之上，当您滚动时，保持在屏幕顶部，而不是在页面顶部。您可以使用此CSS来修复标题。

.header {
    position: fixed;
}

确保您分配了班级＆＃34;标题＆＃34;你的div。出于设计原因，我建议将标题保持在屏幕的最顶端并一直拉伸。您可以使用此CSS来执行此操作。

.header {
    top: 0px;
    left: 0px;
    width: 100%;
}

从技术上讲，您不需要指定＆＃34; top＆＃34;或＆＃34;左＆＃34;定位，但如果您决定稍后更改类似内容，则可确保您不会出现任何问题。您可以在this site查看其他类型的定位。