html - 滚动后 CSS 修复 div 负边距跳跃

Question

我希望当我在负边距滚动后修复元素时，这不是“跳跃”。示例 -> https://jsfiddle.net/uxhgpz6e/2/

enter code here.header-body {
    background: #339CCC;
    border-top: 5px solid #EDEDED;
    border-bottom: 1px solid transparent;
    width: 100%;
    z-index: 1001;
    padding-top:90px;
    transition: all 5s ease;
}`

(我强调了过渡的行为)

Answer 1

我不完全确定您要实现的目标，但这行得通吗？:https://jsfiddle.net/m9oqbuab/1/

本质上，它总是固定的。在 .header-body 下的 css 中添加了以下内容:

.header-body {
    background: #339CCC;
    border-top: 5px solid #EDEDED;
    border-bottom: 1px solid transparent;
    width: 100%;
    z-index: 1001;
    padding-top:90px;
    transition: all 5s ease;
    position: fixed;
}

然后，从 js 中删除了 css('position') 方法。