jquery - 在垂直滚动页面时平滑地改变粘在顶部的元素的填充

Question

我已经设法解决了垂直滚动页面时粘附的标题，但是我想根据页面滚动的程度平滑地更改标题的填充。目前它是固定的一次性更改。 我想要的是在向下滚动页面的同时不断更改标题的填充，而不是直接跳转到另一个填充值。当然，标题会粘在顶部。

jsFiddle here

这是代码

<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>

这是CSS

#ontop {width:100%; height:80px; background-color:yellow;}
header {width:100%; height:20px; background-color:lightgrey; padding:60px 0;}
#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;}

这是jsquery:

$(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();
});

干杯

Answer 1

将过渡添加到标题的 css 样式中

transition: padding 0.5s linear;

jsfiddle

$(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<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>