使用position：sticky实现吸顶效果

<div class="father">
    <div class="son">blue</div>
</div>

.father {
    overflow: visible;
    width: 100%;
    height: 100%;
    padding: 0 20px;
    border: 16px solid #f5f5f5;
    background-color: #fff;
}
.son {
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    top: 40px; 
    background-color: blue;
    z-index: 99;
    border-top: 20px solid #fff;
}

ps:使用sticky实现吸顶，需注意父元素overflow不能设为hidden（设置hidden则无法滚动），且还需考虑position:sticky;的兼容性。