WD Online

課題解決のためのUI実装講座 Web Designing 2015年11月号

スクロールに追従するナビゲーションの工夫と実装(2/2) 工夫をCSSとJavaScriptで実装する

では、実際にサンプルを使って、追従ヘッダにはどのような実装があるのかを見ていこう。CSSだけで実装したベーシックなサンプルと、JavaScriptも活用した高機能なサンプルを紹介する。どちらもシンプルなものなので、これらを起点に応用して実装するとよいだろう。

サンプルファイルダウンロードのご案内
このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。

スクロールに合わせて追従するヘッダをつくる

追従ヘッダは単純なものであれば、CSSだけで実装できてしまう。そこにJavaScriptを使用すると、表示タイミングをコントロールすることができる。まずは、単純にスクロールに追従するだけのヘッダを実装してみよう。また、最後までスクロールするとフッタを表示するようにもしている。

 

71bca163eee0f43f26d3c9ef6b7e2cc2.jpg
スクロールするとヘッダが追従し、最後までいくとフッタが表示される

JSで追従・非追従の切り替え

まず、HTMLでヘッダ(ナビやロゴ)とフッタ(SNSボタン)を用意する(01)。

 

<header class="header js-header">
  <!-- 中略 -->
</header>
<div class="container">
  <!-- 中略 -->
</div>
<footer class="footer js-footer">
  <!-- 中略 -->
</footer>
01 HTMLの抜粋(sample1/index.html)

 

CSSだけで実装する場合は、02のように「position: fixed」を利用すれば、画面に固定された状態になり、スクロールしても動かなくなる。ただし、常に表示(追従)した状態となる。

 

.header{
  //中略
  position: fixed;
  top: 0;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background: #f2f2f2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

//中略
.footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  transition: all .5s ease;
}
02 「position: fixed」を使えば、CSSだけでヘッダやフッタを固定できる

 

次にこの追従ヘッダを、スクロールによって追従・非追従と切り替わるようにしてみよう。先程のCSSを03のように変更する。初期状態として非追従状態と、スクロールした際の追従状態の2パターンを用意する。

 

.header{ 
  //中略
  position: absolute;
  top: 0;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  transition: all .2s ease;
} 

.header.is-fixed{ 
  position: fixed;
  background: #f2f2f2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
} 
03 CSSの抜粋(sample1/assets/style.css)。非追従状態では「position: absolute」とし、追随状態では「position: fixed」とする

 

JavaScript側で行うのはスクロール位置によってclass属性「.is-fixed」の付与・削除を行うだけだ(04)。同じ要領でフッタも実装している。

 

var $header = $('.js-header');
var HEADER_FIXED_POSITION = 0;

//中略

function scrollHandler(){
  if($(this).scrollTop() > HEADER_FIXED_POSITION){
      $header.addClass('is-fixed');
  }else{
      $header.removeClass('is-fixed');
  }

  //中略
}

$(window).on('scroll', scrollHandler);
04 JavaScriptの抜粋(sample1/assets/common.js)。scrollTop()でスクロール量を取得し、それをもとにclass属性「.is-fixed」の付与・削除を行う

 

なお、CSS側では、追従・非追従が切り替わったときにアニメーションするようにtransitionプロパティを指定している。こうすることで動きやデザインをすべてCSS側で実装することができ、修正にも強くなる。

 

position:fixed使用時の注意点

position:fixedを使用する際の注意点として、レガシーなスマホ端末でのバグが多く存在することだ。特にAndroid 2系ではviewportに対して、必ず「user-scalable=no」を指定する必要がある。レガシーブラウザへの対応などを考えるときには、fixedを使用すること自体を検討する必要もあるので、注意してほしい。

 

スクロールの方向に応じて追従ヘッダを表示・非表示する

次に、Case Studyで紹介したハフィントンポストのように、下方向へスクロールしている間は追従ヘッダを非表示にし、上方向へスクロールすると追従ヘッダを表示するようにしてみよう。

 

246017dd1d61f636edf1de7204168cf4.jpg
下方向へスクロールしている間は追従ヘッダが非表示となり、上方向へスクロールすると追従ヘッダが表示となる

JSで表示・非表示の切り替え

この実装には、「通常のヘッダ」「下方向にスクロールしたときのヘッダ」「上方向にスクロールしたときのヘッダ」という3つの段階が必要となる。この3パターンをCSSで作り(05)、JavaScriptでスクロールの位置や方向をもとに切り替えていく(06)。

 

.header{ 
  //中略
  position: absolute;
  top: 0;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  transition: all .2s ease;
} 

.header.is-fixed{ 
  position: fixed;
  background: #f2f2f2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transform: translateY(-56px);
} 

.header.is-show{ 
  transform: translateY(0px);
} 
05 CSSの抜粋(sample2/assets/style.css)。3つのパターンのヘッダを用意する

 

var $header = $('.js-header');
var FIXED_POSITION = 0;
var SHOW_POSITION = 60;
var beforeScrollTop;

function scrollHandler(){
  var scrollTop = $(this).scrollTop();

  if(scrollTop > FIXED_POSITION){
      $header.addClass('is-fixed');
  }else{
      $header.removeClass('is-fixed');
  }

  if(scrollTop > SHOW_POSITION){
      if(scrollTop <= beforeScrollTop){
          $header.addClass('is-show');
      }else{
          $header.removeClass('is-show');
      }
  }

  beforeScrollTop = scrollTop;
}

$(window).on('scroll', scrollHandler).trigger('scroll');
06 JavaScriptの抜粋(sample2/assets/common.js)。スクロールポジションを比較しながら、スクロール方向を判断している

 

スクロールの方向は、イベントが発火したときのスクロールポジションと、その一つ前のスクロールポジションを比較することで判断することができる。現在のスクロールポジションの方が大きければ下方向にスクロール、小さければ上方向にスクロールしていることになる。

スクロールポジションを使った条件を設けてclass属性「.is-fixed」や「.is-show」の付与・削除を行うことで、3パターンを切り替える。

これで下に向かって読んでいる間は、画面を最大限に使用でき、ストレスを減らすことができる。また、上方向にスクロールするときは何か別のアクションを行おうとしていると予想され、そこでメニューを見せてあげることでストレスのない誘導を実現できる。

 

追従ヘッダを使うときの注意点

追従ヘッダは最近多く取り入れられているUIだ。ロゴを掲載したヘッダは下層からの流入が多いメディアサイトにおいて、トップページへの導線を確保しつつ、名前をはっきりとアピールすることができる。しかし、追従ヘッダは使い方を間違えるとユーザーの視界を必要のない情報で遮り、使い勝手の悪いものになる可能性も含んでいる。使用する際は、その情報を常に見せる必要があるのかしっかりと検討しよう。

 

8990e3b8def98dd1c7f254bd78fb0a28.jpg
森田珠奈子
独学でHTML・CSSコーディングを学ぶ。大学卒業後、専門学校にてグラフィックデザインを専攻。2012年に(株)LIGに入社。現在はWebデザイナー/イラストレーターとしてデザイン業務に従事している。

 

e554fb41b243f82f5edd762277bf7256.jpg
小見祐介
カフェでの勤務を経験後、独学でWeb制作を勉強。2013年からWebデザイナーとして働き始める。2015年に(株)LIGに入社。現在はフロントエンドエンジニアとして主にAngularJSを使った案件の開発・運用に従事している。 http://liginc.co.jp/

掲載号

Web Designing 2015年11月号

Web Designing 2015年11月号

2015年10月17日発売 本誌:1,559円(税込) / PDF版:1,222円(税込)

実践的コンテンツマーケティング講座/ヒートマップツール導入ガイド

サンプルデータはこちらから

■ 特集:Web担当者のための実践的コンテンツマーケティング講座
 手法やツールではない、概念であり戦略だ! その秘訣、教えます。

■ 集中企画:ユーザー行動を可視化する「ヒートマップツール」導入ガイド
 ユーザー行動を探りながら、より来たくなるWebサイトを作ろう

■ WD SELECTION
 WDが選ぶ注目のデジタルコンテンツ
  写プライズ/それでも、わたし。 - niko and …/MY MINTIA MAKER/BAO BAO MUSIC/リアル脱出ゲーム「呪われたオーディション会場からの脱出」/ロッテ Fit’s presents みんなでつくろう! ウォーリーのせかい!/A DAY WITH THE ANGELS VOGUE GIRL/Hello, New World./SLICE OF HEARTLAND ハートランドビール/光文社創立70周年記念コンテンツ『360° PARTY』/TYO-ID TYO INTERACTIVE DESIGN

 ナビゲーターが選ぶ注目のデジタルコンテンツ
  [バズ施策]緻密なPR視点がキモ!:The Extreme Minuet?  眞鍋海里
  [デジタルプロモーション]行列エンターテインメント:HelixGame  築地 Roy 良
  [Webサービス]感染する情報:Plug**   仲暁子
  [IoT]実家の課題解決サービス:まごチャンネル  神谷憲司

■マーケティング・プロモーション
 □ サイト改善基礎講座
  アクセスログ解析を使った現状把握で見るべき項目

 □ ハギハラ総研
  国勢調査のオンライン回答率は、なぜ東京が低いのだろうか

 □ デジタルプロモーションの舞台裏
  テーマパークの来場者数増加を呼んだ、サンリオキャラクターが作れるサイト

 □ 行動デザイン塾
  人を動かすための18の「ツボ」

 □ 課題解決のためのU実装講座
  追従要素を工夫してスマホユーザーのストレスを軽減する

 □ 解析ツールの読み方・活かし方
  解析結果からモバイル最適化を行う


■ビジネス・EC
 □ ECサイト業界研究
  オムニチャネル:集客に必要なタッチポイント

 □ 月刊店舗設計
  ぐらこころ:写真をシェアする時代のアイデア商品「おうち写真館」

 □ モバイルビジネス最前線
  MOTTAINAIマーケット:新旧事業の社内ジョイントベンチャーが価値を作る
  
 □ 知的財産権にまつわるエトセトラ
  引用の範疇

 □ Bay Area Startup News
  カギの開け閉めをスマートフォンでワンタッチ! 勤怠管理や入室者制御もできるスマートロック

■クリエイティブ
 □ モノを生むカイシャ
  東京ピストル:「編集力」で遊べる会社!

 □ 清水幹太の「Question the World」
  Zolty(BREAKFAST):NYで最も注目される男との、やたらと落ち着く会話

 □ ツクルヒト
  保坂俊彦(サンドアーティスト):砂から生まれ、砂に還る巨大彫刻

 □ 最果タヒの「詩句ハック」
  第17回 モノローグスタンプ

 □ デザインにできることMonologue
  Vol.142 本をつくる

 □ エキソニモのドーン・オブ・ザ・ボット
  出会った女性はBOTばかり! 情報漏洩事件で判明した悲しき実態とは?


■インフォメーション
 □ Topics
  Illumicap/電撃戦-SPEED CHESS-

 □ Movement&News
  ドイツ銀行の“現代写真”コレクション/杉本博司の大規模展/「原子力」をテーマにしたシャンデリアによるインスタレーション/オモチャや廃材から創り出す“シャンデリアアート”とは?/全長100mもの超絵画大作を披露する村上隆の個展
  Facebookと違うユーザー傾向に注目! Instagramユーザー生態調査/政府が企業の世界進出を支援するフランスの試みとスタートアップたち/Twitterのタイムラインに動画広告、アプリインストールの促進剤に ほか

編集部よりお詫びと訂正のお知らせ

特集「Web担当者のための実践的コンテンツマーケティング講座」にて、P029「情報を拡散しやすい」に誌面のデータに誤りがあり、本文が読めない状態となっていました。お詫びするとともに、以下に正しい内容を掲載いたします。

▼画像をクリックすると拡大表示します。
WD1511_P29.png

また、WDオンライン版では、こちらで該当記事を含むページを無料公開しています。あわせてご参照ください。

編集部からのおすすめ記事

この記事を見た人はこんな記事も見ています