ukuk6 score 10
2015/08/24 18:57 投稿
| スマホのTwitterアプリのスクロールした時のヘッダー部分の動きをHTMLとCSSで再現できますでしょうか。 |
| はじめまして。HTML等について勉強中の者です。 |
| なかなか自分一人ではうまくいかないため、皆様にお力を貸していただければと思います。 |
| いまスマホサイトを作っております。 |
| スマホのTwitterアプリやLINE MUSICのスクロールした時のヘッダー部分の動きをHTMLとCSSで再現したく思っています。 |
| jsでクラスの付与を、CSSで動きをと試していますがうまくいきません。 |
| ヘッダー部分のサイズが小さくなる分スクロールするコンテンツがガクッと落ちてしまったり、滑らかに動かなかったり…。 |
| できれば、スクロールと同時にじんわりとブラーがかかり、ヘッダーの高さが小さくなって、メニューバーと合わせて固定というように動かしたいのですが実現する方法はありますでしょうか。 |
| 知識が足りずお恥ずかしい限りですが、アドバイスいただけますと大変ありがたいです。 |
| どうぞよろしくお願いいたします。 |
|  |
| ```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) |
