javascript - 如何在滚动上修复/粘贴标题行？

Question

我想在页面滚动期间修复/粘贴标题“顶”行（不是中间行和底行）。我还为第一行创建了一个类。这是我的标题代码：

在此处输入图像描述

标签： javascripthtmlcsswordpressheader

Answer 1

请在问题中添加您的代码，不要将链接粘贴到屏幕截图中。如果您还添加 css 代码，这将有助于获得更好更快的答案，因为样式是在样式表中完成的。

但我想我有你的问题。

---

如果您的标题位于页面顶部，则它是您添加到样式表中的类的简单 css 属性：

.riga_sup {
    position: fixed;
    top: 0;
}

看一下例子：https ://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_menu

---

如果您的标题不在页面顶部，但您希望它在滚动后位于顶部位置时被固定，您将需要一点 javascript 来添加具有“位置：固定”的类；滚动到达元素时的样式。在示例中，标头的 ID 为“myHeader”。

<script>
    window.onscroll = function() {myFunction()};
    var header = document.getElementById("header");
    var sticky = header.offsetTop;
    function myFunction() {
      if (window.pageYOffset > sticky) {
          header.classList.add("sticky");
      } else {
          header.classList.remove("sticky");
      }
    }
</script>

在您的 CSS 中，您将属性赋予“粘性”类：

.sticky {
    position: fixed;
    top: 0;
}

这是一个示例：https ://www.w3schools.com/howto/howto_js_sticky_header.asp