えーっと。最近はスマホ対応のレスポンシブデザインが主流になっておりまして、それに応じて縦長のサイトが増えてきているような気がします。
それに応じてナビゲーションが固定になっているサイトもちらほら。
ナビに背景をちゃんとつけているサイトならいいんですけど、デザインの都合上どうしても背景色をつけたくない。しかしスクロールして進んでいくとあるセクションではセクションの背景の都合上、どうしてもナビが見えにくくなるといった問題（長いなw）がある場合もあります。
ならセクションごとに色を変えれるようにすればいいじゃないといった取り組みが今回の記事のテーマになります。
タイトルで全てなのですが、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(){ //セクション２から３の間はこれ
if ($(window).scrollTop() > $('#sec2').offset().top && $(window).scrollTop() < $('#sec3').offset().top){ $("nav ul li").css("color", "#fff"); }//セクション３より進んだらこれ
else if($(window).scrollTop() > $('#sec3').offset().top){ $("nav ul li").css("color", "#ff0000"); }else//それ以外（つまりセクション１である場合）はこれ
$("nav ul li").css("color", "#000"); }); });
</script>
簡単に解説しますと、「7行目の部分はセクション2とセクション3の間に進んだらこれを行え」という処理で、10行目からは「セクション3以上に進んだらこれを行え」という処理。最後のelseはそれ以外、「つまりセクション１である場合はこれを行え」という指示を書いています。
この条件分岐を応用すればユーザーにも見やすいナビを提供することができますね。
この場合はセクションが番号になっているので別の書き方もあると思いますが、セクションの名前なんて色々つけているでしょうから、こういう風にしてみました。
コーポレートサイトは企業の看板となるウェブサイトです。顧客とのファーストコンタクトになる場合が多いので、ブランディング視点で企業を魅力的に伝えるホームページを構築いたします。
ブランドサイトや集客サイトはお問い合わせなど、コンバージョンの獲得を強く意識したホームページになります。クライアントの事業内容によって、コーポレートサイトをそのまま集客の核とする場合と、別途ブランドサイトや集客サイトを作ってブランディングを行う場合があります。
採用サイトは、コーポレートサイトと同様、求職者の心に響くためのブランディング視点が必要になります。求職者の琴線に触れる非金銭的ポイントと貴社の強みや特徴をきちんと整理し、伝わるサイトを制作いたします。
検索ユーザーだけでなく、潜在ユーザーにも適切にアプローチできるFacebookやInstagramなどのSNS広告を運用します。
エリアや年齢性別など、細かくターゲットをセグメントし、適切なユーザーへアプローチします。
近年重要視されているMEO（Map Engine Optimization）
Googleマップでの検索結果において上位表示させる対策です。アルラボではGoogleマイビジネスの最適化のほか、サイテーション施策など、上位表示に必要なノウハウをご提供可能。
私たちは、お客様のビジネスを成長させ、
より前に進ませるためにともに考え、創るWeb制作会社です。
ホームページの新規・リニューアル制作から
ブランディング・広告運用・SEO対策などWeb集客導線を作ります。
ホームページ制作・広告運用・SEOなど
ご相談はお気軽にご相談ください。
お電話でのご相談も随時受け付けております。
お気軽にご連絡ください。
0952-20-1501（佐賀）
092-717-3446（福岡）
営業時間：9:00~17:00（休業日：土日祝）