jQueryLP(ランディングページ)などでよく使われている、ある特定のエリアに差し掛かった時にパッと色が変わるナビゲーションの実装をしていきます。今回は、セクションが画面に登場する度に、それに応じたid指定のサイドメニューの色が変わる効果を例にあげますが、そうでない場合にも応用が効くと思います。href="#to_section6"&gt;section6&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/aside&gt;メインカラムとサイドカラムです。メインカラムにはidを指定します。そこにページ内リンクを設定する要領で、サイドメニューの<a>にもメインカラムのidへリンクを指定します。hreF=””>に指定した、対応したidをもつメインカラムの<section>がスクロールによって現れた時に、サイドカラムの各<a>に効果を当てていきます。#fcc;}わかりやすく、sectionを色分けして高さをつけています。サイドメニューは画面上部に固定しています。a’)が、変化を起こすターゲットです。クラスとかidを指定している場合はそれを書いたほうがいいでしょう。イベント発生ごとに各要素をターゲットとするため、.eachで処理します。STUDIOjQueryのeachの仕組みを徹底的にわかりやすく解説してみた。DQNEO起業日記eachは感覚で使ってしまっているので、しっかり勉強せねば...つぎに、後に使う変数を定義します。aのhref=””値$target...変数linkToをjQueryオブジェクト化。$(linkTo)と書いて代入する最後の項目はハマってしまいました。function」などとコンソールでエラーが出ます。以上の変数をベースに、具体的な数値を計算する変数を書きます。href=””値、つまりはサイドメニューと対をなすセクション要素)の上端の、HTMLの一番上から$targetの上端の距離。「ページ上端からスクロールした距離px($window.scrollTop())」が、「ターゲットが対象とするsectionの、ページの上からの位置(topLimit)」よりも大きくて、「ページ上端から、ターゲットのsectionの下端までの距離(bottomLimit)」より小さい場合に、ターゲットにclass=”now”を付加し、そうでない場合(対象のsectionを通り過ぎた場合)にclass=”now”を外すということです。#fcc;}と指定しているので、画面上にhref=””と同じidのsectionが現れた場合、サイドメニューの一部分が赤く背景色が変わる仕様になっています。liにtransitionプロパティを使用しているので、フワッと背景色が変わる感じになってて、ちょっとやわらかくて落ち着いた感じになっていますねー。この「ある要素が現れたとき、エフェクトを与える」というのは、応用を利かせることにより、非常にクリエイティブな表現ができると思います。違う方法ですが、その応用をしているwebサイトをご紹介します!jquery.inviewで更にリッチに実装!jQuery.inviewも似たようなエフェクトを実装できます。前述の応用を実装するためにはjquery.inviewがお手軽でしょう。詳しい使い方はこのへんが語ってくださっています。スクロールにより、対象のセクションに差し掛かるとこんな感じになるんです。本物のサロン品質-いかがでしたでしょうか。サイドメニューの色が変わるだけでも、かなりユーザーは迷いにくくなると思います。今回は「setion1,2...」でしたが、各セクションの見出しを書くことで、より必要な情報を選んで観てもらうことが出来ますね。音楽Profile東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。