javascript - jQuery - 下にスクロールすると縮小するスティッキー ヘッダー

Question

ページを下にスクロールするとスティッキーヘッダーが縮小し（アニメーション付き）、ページが上にスクロールすると通常の状態に戻る方法を知りたいです。明確にするための 2 つの例を次に示します。

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/

このリンクには、ヘッダー自体だけでなく、ヘッダー内の要素を小さくする方法を示すソース コードを含む優れたチュートリアルがあります。