jQuery - 向下滚动时缩小的标题

Question

我想知道当你向下滚动页面时如何使一个粘性标题缩小(使用动画),并在页面向上滚动到顶部时返回到正常状态.以下是两个要清除的示例:

http://themenectar.com/demo/salient/

http://www.kriesi.at/themes/enfold/

我得到了修复它的部分,但是当用户向下滚动时我该如何缩小标题呢？

万分感谢

Answer 1

这应该是你正在寻找使用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);
      }  
  }
});

演示:http: //jsfiddle.net/jezzipin/JJ8Jc/

Answer 2

这里是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转换属性很好地动画了"高度"和"背景"属性.

Answer 3

http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/

这个链接有一个很棒的教程,你可以使用源代码,展示如何使标题中的元素以及标题本身更小.