jQuery - スクロールダウン時に縮むスティッキーヘッダー

Question

スクロールヘッダーを（スクロールして）ページを下にスクロールし、ページをスクロールして元の状態に戻す方法を考えます。ここclearifyするには、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/

/touchmove "#header_nav" を「場合に設定されたCSSクラス "小さな" $（文書） .scrollTop（） "が0より大きい。

CSSトランジション属性は、"高さ "と"バックグラウンドund "属性がうまくいきます。

Answer 3

twitterスクロールのトラブル（http://ejohn.org/blog/learning-from-twitter/）に基づいています。

$(function() { 
    var $document, didScroll, offset; 
    offset = $('.menu').position().top; 
    $document = $(document); 
    didScroll = false; 
    $(window).on('scroll touchmove', function() { 
     return didScroll = true; 
    }); 
    return setInterval(function() { 
     if (didScroll) { 
     $('.menu').toggleClass('fixed', $document.scrollTop() > offset); 
     return didScroll = false; 
     } 
    }, 250); 
    }); 

CSS：

.menu { 
    background: pink; 
    top: 5px; 
} 

.fixed { 
    width: 100%; 
    position: fixed; 
    top: 0; 
} 

HTML：

<div class="menu">MENU FIXED ON TOP</div> 

ここ

は、（モバイルデバイス用に便利）

JS JSスクロールイベントを絞る、私の解決策であります

http://codepen.io/anon/pen/BgqHw

Answer 4

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

このリンクは、あなたが小さいヘッダー内の要素だけでなく、ヘッダ自体を作る方法を示す、と遊ぶことができるソースコードと素晴らしいチュートリアルがあります。

Answer 5

私はjezzipinの答えのアップグレード版をやった（と私はパディングトップの代わりの高​​さをアニメーション化していますが、あなたはまだポイントを得る。

/** 
* ResizeHeaderOnScroll 
* 
* @constructor 
*/ 
var ResizeHeaderOnScroll = function() 
{ 
    this.protocol   = window.location.protocol; 
    this.domain    = window.location.host; 
}; 

ResizeHeaderOnScroll.prototype.init = function() 
{ 
    if($(document).scrollTop() > 0) 
    { 
     $('header').data('size','big'); 
    } else { 
     $('header').data('size','small'); 
    } 

    ResizeHeaderOnScroll.prototype.checkScrolling(); 

    $(window).scroll(function(){ 
     ResizeHeaderOnScroll.prototype.checkScrolling(); 
    }); 
}; 

ResizeHeaderOnScroll.prototype.checkScrolling = function() 
{ 
    if($(document).scrollTop() > 0) 
    { 
     if($('header').data('size') == 'big') 
     { 
      $('header').data('size','small'); 
      $('header').stop().animate({ 
       paddingTop:'1em', 
       paddingBottom:'1em' 
      },200); 
     } 
    } 
    else 
     { 
     if($('header').data('size') == 'small') 
     { 
      $('header').data('size','big'); 
      $('header').stop().animate({ 
       paddingTop:'3em' 
      },200); 
     } 
     } 
} 

$(document).ready(function(){ 
    var resizeHeaderOnScroll = new ResizeHeaderOnScroll(); 
    resizeHeaderOnScroll.init() 
})