jQuery - 当向下滚动时收缩的粘性标题 [英] jQuery - Sticky header that shrinks when scrolling down

问题描述

我不知道如何在向下滚动页面时使粘性标题收缩（使用动画），并在页面向上滚动到顶部时返回正常状态。以下是两个要澄清的示例：

I wonder how to make a sticky header shrink(with animation) when you scroll down the page and goes back to normal state when the page is scrolled up to the top. Here are two examples to clearify:

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

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

我得到的部分，使其固定，但我应该怎么办，收缩我的标题，当用户向下滚动？

I get the part to make it fixed, but how should I do to shrink my header when the user scrolls down?

感谢一吨

推荐答案

使用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/

这篇关于jQuery - 当向下滚动时收缩的粘性标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！