position 固定在給定高度

Question

我一直在嘗試使用 Javascript 在給定的滾動高度內將一個元素固定為 position。 在這個高度范圍之外，position 應該回到相對位置。

這是我到目前為止所做的。 position:fixed位於about-option class 內。 當它達到 4680 時，添加 class。

如何使其具有 5800 即 4680 - 5800 的高度端點，並在此高度范圍之外移除 class？

window.onscroll = function () {
        myFunction();
      };

      function myFunction() {
        if (
          document.documentElement.scrollTop > 4680 ||
          document.body.scrollTop > 4680
        ) {
          document.getElementById("about-txt").classList.add("about-option");
        } else {
          document.getElementById("about-text").className = "";
        }
      }

css

.about-option {
  position: fixed;
  top: 20%;
  width: 40%;
  right: 7%;

Answer 1

我猜你正在嘗試做 position sticky 所做的事情：一旦元素碰到窗口的頂部邊界，它就會開始粘住，如果你滾動到相反的方式，它會返回與內容一起移動。 像這兒：

https://codepen.io/elad2412/pen/QYLEdK

<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-content">MAIN CONTENT</div>
  <footer class="main-footer">FOOTER</footer>
</main>

body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
  height:50px; background:#aaa; border-color:red;
}
.main-content{
  min-height:1000px;
}

.main-header{position:-webkit-sticky; position:sticky; top:0;}

訣竅是記住在粘性元素之外添加一個容器，否則它將不起作用。

我希望它有幫助！