在垂直滚动页面时平滑地改变粘在顶部的元素的填充
Smoothly changing padding of element sticked to the top while scrolling vertically the page
我已经设法解决了垂直滚动页面时粘连 header 的问题,但是我想根据页面滚动的程度平滑地更改 header 的填充。目前已修复 one-shot 更改。
我想要的是在向下滚动页面的同时不断更改 header 的填充,而不是直接跳转到另一个填充值。当然 header 会粘在上面。
这是代码
<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();
});
干杯
为 header
的 css 样式添加过渡
transition: padding 0.5s linear;
$(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>
我已经设法解决了垂直滚动页面时粘连 header 的问题,但是我想根据页面滚动的程度平滑地更改 header 的填充。目前已修复 one-shot 更改。 我想要的是在向下滚动页面的同时不断更改 header 的填充,而不是直接跳转到另一个填充值。当然 header 会粘在上面。
这是代码
<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();
});
干杯
为 header
的 css 样式添加过渡transition: padding 0.5s linear;
$(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>