jquery - 在滚动时将一个div附加到浏览器并防止从父div溢出

Question

我正在尝试找到一种方法，在用户滚动过去 div 时将div 附加到用户浏览器的顶部，但这不应传递父div。我为这个概念创建了一个基本的 gif。

当前标记:

body {
  padding:0;
  margin:0;
}
.container {
        width:100%;
        float:left;
        height:800px;
        background:blue;
    }
    .overlay {
        width:50%;
        height:800px;
        position:absolute;
        top:0;
        left:0;
        padding:1em;
        background:red;
        display:block;
        box-sizing:border-box;
    }
    .overlay-content {
    width:100%;
    height:60px;
    background:white;
    }

 <div class="container">
        <div class="overlay">
            <div class="overlay-content">
            </div>
         </div>
    </div>

    

Answer 1

您好，您应该将叠加层设置为粘性

position: -webkit-sticky;
position: sticky;

并添加到容器中

position:relative;