根据滚动更改我的 div 容器的位置答案

【问题标题】：change the position of my div container based on scroll根据滚动更改我的 div 容器的位置
【发布时间】：2017-02-09 01:33:30
【问题描述】：

我实际上是在为我的应用设计样式。我的页眉和页脚之间有容器，当我滚动页面时，当容器遇到页眉时，我希望将位置从相对位置更改为固定。

初始设置：

.div {
        position: relative;
        zoom: 1;
        z-index: auto;
  }

一旦 div 容器是新的标题，我希望 div 的位置更改为固定。

.div {
        position: fixed;
        zoom: 1;
        z-index: 1;
        top: 0px;
        padding-top: 10px;
        left: 400px;
    }

我如何做到这一点？有什么可以帮助我的。

谢谢。

【问题讨论】：

“当容器遇到标题时” - 这是什么意思？ “一旦 div 容器是新的标题” - 这是什么意思？你的标记在哪里？
我的标题是固定的。当我向上滚动时，我的 div 容器也会向上滚动，并且当它即将遇到我的标题的底部时。我希望将 div 容器的位置更改为固定。
现在我明白了你的问题，我更新了我的答案，请检查一下

标签： javascript html css

【解决方案1】：

为您的容器使用onscroll：

<div class="div" id="content" onscroll="onScroll()">
...
<div id="container"></div>
...
</div>

您必须使用javascript并检查容器是否符合标头：

function onScroll() {
    var content = document.getElementById('content');
    var container = document.getElementById('container');
    var scrollTop = content.scrollTop;
    var elOffsetTop = container.offsetTop;
    var elHeight = container.offsetHeight;
    if ((scrollTop > elOffsetTop)&&(scrollTop<elOffsetTop+elHeight)) {
      content.classList.add("on-top");
    } else {
      content.classList.remove("on-top");
    }
  }

在 css 中：

.on-top {
  position: fixed;
  ...
}

这是一个例子： https://jsfiddle.net/en7Lf2wz/6/

【讨论】：