Question

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

初始设定：

.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;
    }

我如何实现这一目标？可以帮助我。

谢谢。

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/

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

1 个答案: