Question

在一些帮助下，我设法创建了一个页面，当页面滚动时，页面顶部会平滑地更改其填充（请注意，在标题上有另一个元素）在滚动时会消失。我遇到的问题是标题下面的#wrapper会快速更改其边距，而不会跟随标题的转换。一般来说，我希望#wrapper能够顺利地跟随递减的标题，并进行类似的转换。这是我到目前为止所拥有的。

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（虽然这是一个单独的问题）......

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

Answer 2

您可以尝试使用jquery animate函数。您的主要问题是，一旦您的标题被赋予固定位置，它就会从流中移除，以便您的包装器向上推动ontop元素。

if($(window).scrollTop() > elemTop){
    wrapperElem.css('padding-top', '10px');//avoid white flashing
    wrapperElem.css('margin-top', '130px');//set to starting point of nav header as it is being removed from the flow
    wrapperElem.animate({'margin-top': '40px'}, 550);
}
else{
    wrapperElem.css('padding-top', '0px');
    wrapperElem.css('margin-top', '0px');
}

这是在jsfiddle中工作的。

滚动页面时，平滑更改填充/粘贴页眉和页面内容的边距

2 个答案: