Question

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

这是代码

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

过渡：填充0.5s线性;

jsfiddle

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

在垂直滚动页面的同时，平滑地更改元素的填充贴在顶部

1 个答案: