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

Have the header/toolbar remain static at the top of the page during scrolls

本文关键字：顶部 静态 滚动 标题 工具栏      更新时间：2023-09-26

现在在许多站点上，假设您在页面中间有一个工具栏/表头。一旦你开始滚动，你就看不到标题或工具栏了，所以你不能在你选择的任何行上执行操作，或者你不能看到列标题的名称。

许多网站现在都这样做，这是伟大的，当你开始滚动工具栏/标题是固定在浏览器的顶部。这不会马上发生，只有当你向下滚动到标题/工具栏通常不可见的位置时才会发生。

我该怎么做?这个功能有名字吗?

Gmail有这个，如果你在阅读电子邮件时向下滚动，顶部的工具栏固定在顶部，所以你可以标记/移动/垃圾邮件

看一下jQuery的Waypoints - Sticky元素，应该是你正在寻找的。

使用如下css:

.static{
  position:fixed;
}

然后，把一个class="static"到你的标题元素。

希望这对你有帮助。欢呼声

你不需要Javascript来解决这个问题-不要让自己更难。使用固定定位强制标题"悬停"在内容上方，当你滚动时，保持在屏幕的顶部，而不是在页面的顶部。你可以使用这个CSS来使你的页眉固定。

.header {
    position: fixed;
}

确保你分配类"header"给你的div。出于设计原因，我建议保持你的标题在屏幕的最顶部，并一直延伸。你可以使用这个CSS来实现。

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

从技术上讲，您不需要指定"top"或"left"的位置，但它可以确保您在以后决定更改此类内容时不会出现任何错误。您可以查看本网站其他类型的定位

相关文章：