在滚动时向浏览器添加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;

Answer 2

在窗口滚动时，一些计算将指示何时到达底边，只需切换（添加/删除）Class＆＃34; stick＆＃34;在合适的时间。

CSS：

.stick {
    position: fixed;
}