JS / jQuery

【jQuery】スクロールして対象の要素が見えた時にメニューの色を変える

LP(ランディングページ)とかによくある、対象の要素が見えた時に色が変わるメニューをjQueryで簡単に実装!

LP(ランディングページ)などでよく使われている、ある特定のエリアに差し掛かった時にパッと色が変わるナビゲーションの実装をしていきます。

今回は、セクションが画面に登場する度に、それに応じたid指定のサイドメニューの色が変わる効果を例にあげますが、そうでない場合にも応用が効くと思います。

 

HTML

メインカラムとサイドカラムです。

メインカラムにはidを指定します。
そこにページ内リンクを設定する要領で、サイドメニューのにもメインカラムのidへリンクを指定します。

サイドカラムのに指定した、対応したidをもつメインカラムの

スクロールによって現れた時に、サイドカラムの各に効果を当てていきます。

CSS

わかりやすく、sectionを色分けして高さをつけています。

サイドメニューは画面上部に固定しています。

jQuery

$(window).on(‘scroll’ ,function(){~で、スクロールにより発生するイベントとして書いていきます!

3行目の$(‘.sidebar li a’)が、変化を起こすターゲットです。クラスとかidを指定している場合はそれを書いたほうがいいでしょう。
で、イベント発生ごとに各要素をターゲットとするため、.eachで処理します。

eachは感覚で使ってしまっているので、しっかり勉強せねば…

つぎに、後に使う変数を定義します。

  • $window…開いてるウィンドウに対して~するため
  • $this…いまターゲットとしている.sidebar li aに対して~するため
  • linkTo…$thisを使って、いまターゲットとしている.slidebar li aのhref=””値
  • $target…変数linkToをjQueryオブジェクト化$(linkTo)と書いて代入する

最後の項目はハマってしまいました。linkToをそのまま使いまわすと「TypeError: linkTo.offset is not a function」などとコンソールでエラーが出ます。

以上の変数をベースに、具体的な数値を計算する変数を書きます。このへんです。

  • topLimit…先ほどの$target(a href=””値、つまりはサイドメニューと対をなすセクション要素)の上端の、HTMLの一番上から$targetの上端の距離
    .offset() | jQuery 1.9 日本語リファレンス | js STUDIO
  • bottomLimit…$targetの上端の、ページの一番上からの距離 + $targetの高さ = HTMLの一番上から$targetの下端の距離

次のif条件分岐で勝負が決まります…!

最初のifは何を言っているかというと、

「ページ上端からスクロールした距離px($window.scrollTop())」が、「ターゲットが対象とするsectionの、ページの上からの位置(topLimit)」よりも大きくて、「ページ上端から、ターゲットのsectionの下端までの距離(bottomLimit)」より小さい
場合に、ターゲットにclass=”now”を付加し、そうでない場合(対象のsectionを通り過ぎた場合)にclass=”now”を外すということです。

で、今回はCSSで

と指定しているので、画面上にhref=””と同じidのsectionが現れた場合、サイドメニューの一部分が赤く背景色が変わる仕様になっています。

デモはこちら。

スクロールして対象要素が現れた時、サイドメニューの色が変わるデモ

あとはCSSの指定で色々アレしてみてください!
今回は.sidebar liにtransitionプロパティを使用しているので、フワッと背景色が変わる感じになってて、ちょっとやわらかくて落ち着いた感じになっていますねー。

この「ある要素が現れたとき、エフェクトを与える」というのは、応用を利かせることにより、非常にクリエイティブな表現ができると思います。
ちょっと違う方法ですが、その応用をしているwebサイトをご紹介します!

jquery.inviewで更にリッチに実装!

jQuery.inviewも似たようなエフェクトを実装できます。
前述の応用を実装するためにはjquery.inviewがお手軽でしょう。

詳しい使い方はこのへんが語ってくださっています。ご参考ください!

スクロールにより、対象のセクションに差し掛かるとこんな感じになるんです。かっこいい!抱かれたい!

BESHOW

BEASHOW (ビショウ) -サロンが開発 本物のサロン品質-

 

いかがでしたでしょうか。

サイドメニューの色が変わるだけでも、かなりユーザーは迷いにくくなると思います。
今回は「setion1,2…」でしたが、各セクションの見出しを書くことで、より必要な情報を選んで観てもらうことが出来ますね。

意外と単純なコーディングなので是非試してみてくださいー!

 

でわ!