如何使一个固定定位的 div 在某个点之前保持固定？

Question

我有一个应用了position: fixed;属性的div。我需要在屏幕滚动到一定高度时停止这个属性。你有什么想法？

我只需要CSS代码。

- Junior Programmer

---

无法仅使用纯CSS完成。 - display-name-is-missing

嗯，好的。但请尽量采用最简单的方式，因为我只学过CSS。 - Junior Programmer

请查看我的更新答案，您只需将其中一个代码块添加到页面底部（在 </body> 之前）。不要忘记将它们包装在 <script></script> 中。 - display-name-is-missing

Answer 1

你可以使用jQuery很容易地实现这一点：

$(window).scroll(function(){
   if ($(window).scrollTop() >= target) {  // change target to number
      $("#el").css('position', 'relative');
   }
});

或者使用纯JavaScript：

window.onscroll = function(){

   if(window.scrollY >= target) { // change target to number
      document.getElementById('el').style.position = 'relative';
   }

};

- display-name-is-missing

---

它像魔法一样奏效。但我还有一个问题，当position: fixed;停止后，div需要变为position: absolute;。一旦它停止，它会跳回原来的位置，而我希望它停在原地而不是跳回去。 - Junior Programmer

你能不能把 style.position = 'relative'; 替换成 style.position = 'absolute';？ - display-name-is-missing

是的，我需要该位置在屏幕上的当前视图中是绝对的，而不是原始位置。是的，那就是我所需要的。 - Junior Programmer

不，它不是。当我滚动到页脚时，按钮是 position:fixed;，然后应用了 position:absolute;，这样 div 就会返回到原始位置。 - Junior Programmer

<script >window.addEventListener("scroll",function() { if(window.scrollY >= 250) { document.getElementById('main_nav').style.position = 'absolute'; document.getElementById('main_nav').style.top = '82%'; } if(window.scrollY <= 250){ document.getElementById('main_nav').style.position = 'fixed'; document.getElementById('main_nav').style.top = '52%'; } });</script> - Junior Programmer