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

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

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

ナビに背景をちゃんとつけているサイトならいいんですけど、デザインの都合上どうしても背景色をつけたくない。しかしスクロールして進んでいくとあるセクションではセクションの背景の都合上、どうしてもナビが見えにくくなるといった問題（長いな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(){ //セクション２から３の間はこれ 
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はそれ以外、「つまりセクション１である場合はこれを行え」という指示を書いています。

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

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

2017.09.04制作コラム

関連情報