スマホのTwitterアプリのスクロールした時のヘッダー部分の動きをHTMLとCSSで再現できますでしょうか。

Question

はじめまして。HTML等について勉強中の者です。
なかなか自分一人ではうまくいかないため、皆様にお力を貸していただければと思います。

いまスマホサイトを作っております。
スマホのTwitterアプリやLINE MUSICのスクロールした時のヘッダー部分の動きをHTMLとCSSで再現したく思っています。
jsでクラスの付与を、CSSで動きをと試していますがうまくいきません。

ヘッダー部分のサイズが小さくなる分スクロールするコンテンツがガクッと落ちてしまったり、滑らかに動かなかったり…。
できれば、スクロールと同時にじんわりとブラーがかかり、ヘッダーの高さが小さくなって、メニューバーと合わせて固定というように動かしたいのですが実現する方法はありますでしょうか。

知識が足りずお恥ずかしい限りですが、アドバイスいただけますと大変ありがたいです。
どうぞよろしくお願いいたします。

<div id="fixed_head">
  <header id="main_header">
    <h1 class="heading"><img src="images/title.png" alt="タイトル"></h1>
  </header>

  <div id="menu_bar">
    <ul>
      <li><a href="/">メニュー1</a></li>
      <li><a href="/">メニュー2</a></li>
      <li><a href="/">メニュー3</a></li>
    </ul>
  </div>
</div>

#main_header {
  background-image: url(../images/main.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  margin: 0 auto;
  -webkit-transition-duration: 2s;
  transition-duration: 2s;
}
#main_header:before {
  content: '';
  float: left;
  padding-bottom: 85%;
}

.fixed #main_header {
  background-image: url(../images/main_blur.jpg);
}
.fixed #main_header:before {
  content: '';
  float: left;
  padding-bottom: 20%;
}

<script>
$(function(){
 var Header = 100;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= Header ) {
           $('#fixed_head').addClass('fixed');
        }
        else {
            $('#fixed_head').removeClass('fixed');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>

参考にさせていただきました
http://codepen.io/ManarKamel/pen/mJtpH
http://qiita.com/zaru/items/82d61ac90394885fb486

Answer 1

こんにちは！
まず、#main_headerは上部固定のはずなのでposition: fixed;の指定が必要なのではないかな？と思いました。
あと、トランジションをさせるには変更前と後のスタイルを、同じプロパティでそれぞれ指定する必要があると思います。
たとえばヘッダーが、
200pxから100pxへ、赤色から緑色へ
と2秒かけてトランジションさせるためには、この場合

#main_header {
  position: fixed;
  height:200px;
  background-color: red;
  background-size: cover;
  background-position: center;
  width: 100%;
  margin: 0 auto;
  -webkit-transition-duration: 2s;
  transition-duration: 2s;
}
.fixed #main_header {
  height:100px;
  background-color: green;
}

とする必要があります。

ぼかしに関してなのですが、
filter: blur()を使用して、上手くトランジションできるかもしれません。

filterプロパティに関する参考リンク

頑張ってください！

Comments

[ukuk6]

アドバイスありがとうございます！

fixedの指定と、同じプロパティでそれぞれ指定ですね。承知しました！
高さと、filter: blur()指定でチャレンジしてみます！

ヘッダー部分や、メニューボタンなどは画面のサイズに合わせて可変にしたくてすべてパーセンテージで指定しています。
padding-bottomを使って無理やり可変にしているのですが、もっとうまい方法などありますでしょうか。
もしhirai0110様がされるとしたらどういった形で動かされますか？

transition-durationなのですが、私のandroidのブラウザだと滑らかに動作していないような気がするのですがこのがたつきを回避する方法はありますでしょうか。
他のアニメーションでもかまいません。

よろしければご教授お願いいたします。