制作コラム

【Javascript】セクションに応じてナビの色を変える方法

縦長のサイト&ナビ固定で生じる問題

えーっと。最近はスマホ対応のレスポンシブデザインが主流になっておりまして、それに応じて縦長のサイトが増えてきているような気がします。

それに応じてナビゲーションが固定になっているサイトもちらほら。

ナビに背景をちゃんとつけているサイトならいいんですけど、デザインの都合上どうしても背景色をつけたくない。しかしスクロールして進んでいくとあるセクションではセクションの背景の都合上、どうしてもナビが見えにくくなるといった問題(長いなw)がある場合もあります。

ならセクションごとに色を変えれるようにすればいいじゃないといった取り組みが今回の記事のテーマになります。

jQueryのoffset()で現在位置を取得する

タイトルで全てなのですが、jQueryのoffset()で現在位置を取得することでこの問題は解決します。(offsetについてはこちらのサイトに詳しく書かれております。)

まずはhtmlから

<body>
    <header id="header">
        <nav>
          <ul>
			   <li>nav1</li>
			   <li>nav2</li>
			   <li>nav3</li>
			   <li>nav4</li>
			   <li>nav5</li>
         /ul>
      </nav>
   </header>
        <!--セクションを3つ作っています-->
	<section id="sec1">
	</section>
	<section id="sec2">
	</section>
	<section id="sec3">
	</section>
</body>

ま、こんな感じですかね。

ここからが大事です。Javascriptの部分です。

<script src="jquery.min.js"></script>
   <script>
		
	$(function(){	
           $(window).scroll(function(){
		 //セクション2から3の間はこれ
		if ($(window).scrollTop() > $('#sec2').offset().top && $(window).scrollTop() < $('#sec3').offset().top){
			 $("nav ul li").css("color", "#fff");
		}//セクション3より進んだらこれ
			 else if($(window).scrollTop() > $('#sec3').offset().top){
			 $("nav ul li").css("color", "#ff0000");
		}else//それ以外(つまりセクション1である場合)はこれ
	         $("nav ul li").css("color", "#000");
	          });
        }); 
    </script>

簡単に解説しますと、「7行目の部分はセクション2とセクション3の間に進んだらこれを行え」という処理で、10行目からは「セクション3以上に進んだらこれを行え」という処理。最後のelseはそれ以外、「つまりセクション1である場合はこれを行え」という指示を書いています。

この条件分岐を応用すればユーザーにも見やすいナビを提供することができますね。

この場合はセクションが番号になっているので別の書き方もあると思いますが、セクションの名前なんて色々つけているでしょうから、こういう風にしてみました。

一覧に戻る

ホームページ
制作業務

コーポレートサイト制作

コーポレートサイトは企業の看板となるウェブサイトです。顧客とのファーストコンタクトになる場合が多いので、ブランディング視点で企業を魅力的に伝えるホームページを構築いたします。

More

ブランドサイト・集客サイト制作

ブランドサイトや集客サイトはお問い合わせなど、コンバージョンの獲得を強く意識したホームページになります。クライアントの事業内容によって、コーポレートサイトをそのまま集客の核とする場合と、別途ブランドサイトや集客サイトを作ってブランディングを行う場合があります。

More

採用サイト制作

採用サイトは、コーポレートサイトと同様、求職者の心に響くためのブランディング視点が必要になります。求職者の琴線に触れる非金銭的ポイントと貴社の強みや特徴をきちんと整理し、伝わるサイトを制作いたします。

More

ECサイト制作

ECサイトは、事業の形態や規模によって求められる内容や機能が異なります。
アルラボではお客様の事業内容や求められる結果に応じてさまざまな形態のECサイトをご提案しています。

More

サービス一覧

Webマーケティング
集客対策業務

リスティング広告運用

検索ユーザーに貴社のビジネスの接点を作るリスティング広告。
限られた予算の中で費用対効果を重視した最適なリスティング広告運用を行います。

More

SNS・YouTube広告運用

検索ユーザーだけでなく、潜在ユーザーにも適切にアプローチできるFacebookやInstagramなどのSNS広告を運用します。
エリアや年齢性別など、細かくターゲットをセグメントし、適切なユーザーへアプローチします。

More

SEO対策

サイトの検索表示順位を上昇させるSEO対策。
内部施策を標準化し、サイトの構造を正しくクローラーに伝え、適切な検索キーワードからユーザーが求める情報とは何なのかを追求します。

More

コンテンツマーケティング

ユーザーにとって価値のあるコンテンツを継続的に発信し、幅広いワードでアプローチするユーザーをキャッチします。

More

MEO対策

近年重要視されているMEO(Map Engine Optimization)
Googleマップでの検索結果において上位表示させる対策です。アルラボではGoogleマイビジネスの最適化のほか、サイテーション施策など、上位表示に必要なノウハウをご提供可能。

More

Webアクセス解析

ユーザーの属性や特徴、そして行動を分析し、コンバージョンに繋がる課題を解決します。ウェブサイトを着実に成長させる指標としてアクセス解析からの改善提案を行います。

More

お問い合わせ
Contact

私たちは、お客様のビジネスを成長させ、
より前に進ませるためにともに考え、創るWeb制作会社です。

ホームページの新規・リニューアル制作から
ブランディング・広告運用・SEO対策などWeb集客導線を作ります。

お問い合わせ・ご相談

ホームページ制作・広告運用・SEOなど
ご相談はお気軽にご相談ください。

お問い合わせ・ご相談

お電話でのお問い合わせ

お電話でのご相談も随時受け付けております。
お気軽にご連絡ください。

0952-20-1501(佐賀)

092-717-3446(福岡)

平日:9:00~17:00