スティッキーヘッダーをアニメートする方法は？

Question

Iは160

$(window).scroll(function() 
{ 

    if($(window).scrollTop() > 160) 
{ 

     $('.dark-menu').addClass('stickyNav'); 
     $('header').addClass('mainHeaderFixed'); 
     $(".menu-second-menu-container").hide(); 
     $(".menu-first-menu-container").addClass('new-end'); 
     $("a.main-logo").hide(); 
     $("a.small-logo").show(); 
     $(".bp-phone").addClass("stickyNumber"); 
     $("img.telephoneIconHeader").addClass("stickyImg"); 
     $("a.topHeaderMailto").addClass("stickyaa");   
} 
else 
{ 
     $('.dark-menu').removeClass('stickyNav'); 
     $("a.topHeaderMailto").removeClass("stickyaa"); 
     $('header').removeClass('mainHeaderFixed'); 
     $(".menu-second-menu-container").show(); 
     $(".menu-first-menu-container").removeClass('new-end'); 
     $("a.main-logo").show(); 
     $("a.small-logo").hide(); 
     $(".bp-phone").removeClass("stickyNumber"); 
     $("img.telephoneIconHeader").removeClass("stickyImg"); 
} 
}); 

これは/表示要素を隠すための微細であるの高さに到達したときにjQueryを使用してスクロールに固定されている粘着性のヘッダを持っているが、私は、全体の粘着性NAVとbackbarがオンアニメーション化しますスクロール。

私は、ヘッダ部にCSSを適用することを試みた：

-webkit-transition: height 5s; 
    -moz-transition: height 5s; 
    transition: height 5s; 

しかし、これは動作しません。スクロールでこれをアニメーション化するにはどうすればよいですか？ここで

は私のサイトです。ここで

http://insurancefocus.bemediadev.com.au/

は私が達成したいものです。

https://codepen.io/malZiiirA/pen/cbfED

Answer 1

編集

投稿したペンのヘッダーは固定されていますが、固定されていません。これが必要な場合は、最初から.mainposition: fixedを与え、要素の高さを変更するだけです。

heightが設定されていないため、トランジションはヘッダーには影響しません。 2つのロゴバージョンを交換すると、再計算されます。あなたがheightを指定しない場合

これに関する詳細については、高さのみの場合は効果が表示されます高さの推移を設定How can I transition height: 0; to height: auto; using CSS?

旧

参照、css3 height transition not workingを参照しますか、要素は実際に変更されます。あなたの場合、高さは同じままです。次のCSSを使用して、要素のheightを変更してみてください。この遷移が表示されます。

.main { 
    height: 100px; 

    -webkit-transition: height 5s; 
    -moz-transition: height 5s; 
    transition: height 5s; 
} 

.main.mainHeaderFixed { 
    height: 160px; 
}