我想知道如何在向下滚动页面时使粘性标题收缩(带有动画),并在页面向上滚动到顶部时恢复到正常状态。这里有两个要澄清的例子:
http://themenectar.com/demo/salient/
http://www.kriesi.at/themes/enfold/
我得到的部分,使它固定,但我应该如何做,以缩小我的标题时,用户向下滚动?
万分感谢
发布于 2013-05-08 21:50:06
这应该是您使用jQuery所要查找的内容。
$(function(){
$('#header_nav').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
if($('#header_nav').data('size') == 'big')
{
$('#header_nav').data('size','small');
$('#header_nav').stop().animate({
height:'40px'
},600);
}
}
else
{
if($('#header_nav').data('size') == 'small')
{
$('#header_nav').data('size','big');
$('#header_nav').stop().animate({
height:'100px'
},600);
}
}
});
发布于 2013-09-03 15:06:50
这里是jezzipin解决方案的CSS动画分支,用于分离代码和样式。
JS:
$(window).on("scroll touchmove", function () {
$('#header_nav').toggleClass('tiny', $(document).scrollTop() > 0);
});
CSS:
.header {
width:100%;
height:100px;
background: #26b;
color: #fff;
position:fixed;
top:0;
left:0;
transition: height 500ms, background 500ms;
}
.header.tiny {
height:40px;
background: #aaa;
}
http://jsfiddle.net/sinky/S8Fnq/
在滚动/触摸移动时,如果"$(document).scrollTop()“大于0,则css类"tiny”被设置为"#header_nav“。
CSS转换属性可以很好地为"height“和”nicely“属性设置动画效果。
发布于 2014-10-17 18:39:28
http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/
这个链接有一个很好的源代码教程,展示了如何使头部中的元素变得更小,以及头部本身。
https://stackoverflow.com/questions/16442016
复制相似问题