如何在滾動條上修復/粘貼 header 行？

Question

我想在頁面滾動期間修復/粘貼 header“頂”行（不是中間行和底行）。 我還為頂行創建了一個 class。 這是我的 header 代碼：

在此處輸入圖像描述

Answer 1

請在問題中添加您的代碼，不要將鏈接粘貼到屏幕截圖中。 如果您還添加 css 代碼，這將有助於獲得更好更快的答案，因為樣式是在樣式表中完成的。

但我想我有你的問題。

---

如果您的 header 位於頁面頂部，則它是一個簡單的 css 屬性，您將其添加到樣式表中的 class 中：

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

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

---

If your header is not at the top of your page, but you want it to be fixed if it is at the top position after scrolling, you will need a little bit of javascript to add the class with the "position: fixed;" 滾動到達元素時的樣式。 在示例中，header 的 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 中，您將屬性賦予“粘性”class：

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

這是一個例子： https://www.w3schools.com/howto/howto_js_sticky_header.asp