jquery - 滚动页面时平滑更改粘性标题和页面内容的填充/边距

Question

在一些帮助下，我设法创建了一个页眉，当页面滚动时它停留在页面顶部，其填充的平滑变化(请注意，在页眉上方有另一个元素)在滚动时消失。我遇到的问题是 header 下方的#wrapper 会快速更改其边距并且不会跟随 header 的转换。一般来说，我希望#wrapper 以类似的过渡平滑地跟随递减的 header 。这是我目前所拥有的。

fiddle here

$(function() {
  var elem = $('header'),
    wrapperElem = $('#wrapper'),
    elemTop = elem.offset().top;
  $(window).scroll(function() {
    elem.toggleClass('navfixed', $(window).scrollTop() > elemTop);
    wrapperElem.toggleClass('wrapperBelow', $(window).scrollTop() > elemTop);
  }).scroll();
});

#ontop {
  width: 100%;
  height: 80px;
  background-color: yellow;
}
header {
  width: 100%;
  height: 20px;
  background-color: lightgrey;
  padding: 60px 0;
  transition: padding 0.5s linear;
}
#wrapper {
  background-color: lightblue;
  height: 5000px;
}
.navfixed {
  position: fixed;
  top: 0px;
  z-index: 100;
  width: 100%;
  display: block;
  margin-bottom: 120px;
  padding: 10px 0;
}
.wrapperBelow {
  margin-top: 42px;
}

<div id="ontop">something</div>
<header>navigation</header>
<div id="wrapper">1
  <br/>2
  <br/>3
  <br/>4
  <br/>5
  <br/>6
  <br/>7
  <br/>8
  <br/>9
  <br/>10
  <br/>
</div>

Answer 1

我会使用关键帧动画(使用 jQuery 不能保证与 CSS 同步):

@-webkit-keyframes wrappermargin {
  from {margin-top: 140px;}
  to {margin-top: 42px;}
}

@keyframes wrappermargin {
  from {margin-top: 140px;}
  to {margin-top: 42px;}
}

.wrapperBelow {
  margin-top: 42px;
  -webkit-animation: wrappermargin 0.5s linear;
  animation: wrappermargin 0.5s linear;
}

Demo

您可能会注意到动画本身效果很好，但在跨浏览器比较时边距看起来不那么明显，目前的数量似乎只适合 Firefox(虽然这是一个单独的问题)...

编辑 - 对此进行调查后，它似乎与问题本身无关。它也与上面提到的不同解释的边距没有任何关系。这仅仅是因为每个浏览器在触发鼠标滚轮时将页面向下滚动的量不同......