元素锁定在scroll上纯JavaScript无Jquery

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

我尝试将绿色框的位置设置为“固定”，但它跳出了红色框。因此，它需要保持绝对

请看我在这里现场设置的示例

或者看看这里的代码

<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>

这是一个带有一些随机内容的标题
向下滚动时，此元素需要位于顶部并锁定。
但是，当您滚动时，可以看到顶部有一个间隙。
#锁定{
背景色：柠檬黄；
填充：10px；
宽度：150px；
位置：绝对位置；
排名：0；
右：0；
}
window.onscroll=changePos；
函数changePos（）{
var locked=document.getElementById（“locked”）；
如果（window.pageYOffset>30）{
locked.style.position=“绝对”；
locked.style.float=“right”；
locked.style.top=pageYOffset+“px”
}否则{
locked.style.position=“”；
locked.style.top=“”；
}
}

---

提前感谢

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

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

---

显然，您可以直接从元素中获取高度，而不是对其进行硬编码

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

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

---

显然，您可以直接从元素中获取高度，而不是对其进行硬编码

您的body或html标记上可能有一些填充/空白。检查是否有，然后通过从window.pageYOffset全局中减去金额对其进行说明

---

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

您的body或html标记可能有一些填充/边距。检查是否有，然后通过从window.pageYOffset全局中减去金额对其进行说明

---

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

为什么不尝试使用position fixed，例如：

#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计算。

为什么不尝试使用position fixed，比如：

#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计算。

这就是你想要实现的吗？我不知道我是否理解你的问题，就是这样谢谢：）这就是你想要实现的吗？我不知道我是否理解你的问题，就是这样谢谢：）太棒了，非常简单和干净太棒了，非常简单和干净谢谢你的回答，但是绿色的盒子需要放在红色的盒子里面。因此不能使用fixedYes，但我告诉您，使用jquery或您喜欢的方法来计算红色和绿色框，使其具有相同的边距。这很简单，对吧？谢谢你的回复，但是绿色的盒子需要在红色的盒子里面。因此不能使用fixedYes，但我告诉您，使用jquery或您喜欢的方法来计算红色和绿色框，使其具有相同的边距。这很容易，对吧？