元素锁定在滚动纯 JavaScript 否 Jquery

Question

我试图在用户滚动浏览内容时将绿色框锁定到最顶部。但是，当你滚动时，绿色框的顶部有一个空隙（如演示所示）

我试过给绿框设置position为fixed，但是它跳出了红框。所以它需要保持绝对。

请查看我在此处设置的示例 http://jsfiddle.net/jpXjH/839/

或查看此处的代码

<div style="padding: 20px 0px; background-color:cyan;">
    This is a header with some random content
</div>

  <div style="width:480px; height:1400px; overflow:hidden; margin:auto; 
   border:1px solid gray; position:relative; background-color: #ff5d5d; ">

      <div id="locked">
         This element needs to be on the very top LOCKED when scrolled down. 
         However you can see there is a gap in the very top when you scroll.
      </div>

</div>

<style>
#locked{
    background-color: limegreen;
    padding:10px;
    width:150px;
    position:absolute;
    top:0;
    right:0;
}
</style>
<script>
    window.onscroll = changePos;

            function changePos() {
                var locked = document.getElementById("locked");

                if (window.pageYOffset > 30) {
                    locked.style.position = "absolute";
        locked.style.float = "right";
                    locked.style.top = pageYOffset + "px"
                } else {
                    locked.style.position = "";
                    locked.style.top = "";
                }
            }
<script>

提前致谢

Answer 1

我能想到的最简单的解决方案是从您在 JS 中更改的 header.style.top 中减去顶部锁定栏的高度：

header.style.top = pageYOffset - 76 + "px"

显然你可以直接从元素中获取高度而不是硬编码。

Answer 2

您的 body 或 html 标签上可能有一些 padding/margin。检查它是否存在，然后通过从 window.pageYOffset 全局中减去数量来计算它。

您还需要考虑红色 div 之前的任何元素的高度。

Answer 3

为什么你不尝试使用固定位置，例如：

#header{
  background-color: limegreen;
  padding:10px;
  width:150px;
  position:fixed;
  top:0;
  right:0;
}

    window.onscroll = changePos;

                function changePos() {
                    var header = document.getElementById("header");

                    if (window.pageYOffset > 30) {
                        //header.style.position = "absolute";
            header.style.float = "right";
                        //header.style.top = pageYOffset + "px"
                    } else {
                        header.style.position = "";
                        header.style.top = "";
                    }
                }

如果你和红色容器对齐的话你可以用JS计算。

元素锁定在滚动纯 JavaScript 否 Jquery

Element locked on scroll pure JavaScript no Jquery

javascript

html

css

scroll

parallax