質問編集履歴

1 イメージ画像の追加

ukuk6

ukuk6 score 10

2015/08/24 18:57  投稿

スマホのTwitterアプリのスクロールした時のヘッダー部分の動きをHTMLとCSSで再現できますでしょうか。
はじめまして。HTML等について勉強中の者です。
なかなか自分一人ではうまくいかないため、皆様にお力を貸していただければと思います。
いまスマホサイトを作っております。
スマホのTwitterアプリやLINE MUSICのスクロールした時のヘッダー部分の動きをHTMLとCSSで再現したく思っています。
jsでクラスの付与を、CSSで動きをと試していますがうまくいきません。
ヘッダー部分のサイズが小さくなる分スクロールするコンテンツがガクッと落ちてしまったり、滑らかに動かなかったり…。
できれば、スクロールと同時にじんわりとブラーがかかり、ヘッダーの高さが小さくなって、メニューバーと合わせて固定というように動かしたいのですが実現する方法はありますでしょうか。
知識が足りずお恥ずかしい限りですが、アドバイスいただけますと大変ありがたいです。
どうぞよろしくお願いいたします。
![イメージ説明](daf7cada792215a7ce6785943ff057ef.png)  
```lang-html
<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>
```
```lang-css
#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%;
}
```
```lang-java
<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://codepen.io/ManarKamel/pen/mJtpH)
[http://qiita.com/zaru/items/82d61ac90394885fb486](http://qiita.com/zaru/items/82d61ac90394885fb486)
  • HTML

    22897 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS3

    5086 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る