jQuery・シンプルなスクロールスパイを作りました [PC限定 / IE9対応]

150907_001

皆さんブログで Bootstrap のスクロールスパイをよく紹介されていますが、余計なコードを多数追加する必要があるため、なるべく使いたくありません。

というわけで、シンプルなスクロールスパイを作りました。PC対応のみの理由は、スマホで使うと視界の邪魔になるため、実務での使いどころが難しいためです。

IE8は対応しないの? 2016年1月にサポート終了です。

スマホは? Bootstrapを使いましょう。

目次

検証済みブラウザとOS

  • IE 9~
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X Yosemite

 

このjQueryで出来ること、出来ないこと

description

出来ること
  • ナビリンクをクリックで該当要素へスムーススクロール
  • サイドナビをマウスオーバーするとテキストをポップアップ(jQuery関係なし)
出来ないこと
タッチデバイスで正確な位置を特定すること

 

要点とコード

code

HTML

該当要素に class=”block” を指定

 

SCSS

  • ナビゲーションは fixed で固定表示
  • サイドナビのマウスオーバーテキストは、リストタグ内に absolute で配置して、display: none; で非表示に。li:hover div に display: block; を指定して表示。

 

jQuery

  • .each() メソッドを使い、各要素を個別に処理
  • for ループ で該当要素を減少させた後、break でループ停止
  • 要素トップから – 0.1 を指定することで、ナビゲーションを正確にアクティブ化させる
  • スムーススクロールは Velocity.js を利用

 

カスタマイズ

customize

ナビゲーションを画像にしたい
a / a:hover / .active に背景画像を指定する。

 

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。