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

Question

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

初始设定 ：

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

一旦div容器是新的头文件，我希望div的位置更改为fixed。

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

我该如何实现？ 有什么可以帮助我的。

谢谢。

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