縦長のサイト&ナビ固定で生じる問題えーっと。最近はスマホ対応のレスポンシブデザインが主流になっておりまして、それに応じて縦長のサイトが増えてきているような気がします。それに応じてナビゲーションが固定になっているサイトもちらほら。ナビに背景をちゃんとつけているサイトならいいんですけど、デザインの都合上どうしても背景色をつけたくない。スクロールして進んでいくとあるセクションではセクションの背景の都合上、どうしてもナビが見えにくくなるといった問題(長いなw)がある場合もあります。セクションごとに色を変えれるようにすればいいじゃないといった取り組みが今回の記事のテーマになります。jQueryのoffset()で現在位置を取得するタイトルで全てなのですが、jQueryのoffset()で現在位置を取得することでこの問題は解決します。(offsetについてはこちらのサイトに詳しく書かれております。id="sec3"></section></body>ま、こんな感じですかね。Javascriptの部分です。</script>簡単に解説しますと、「7行目の部分はセクション2とセクション3の間に進んだらこれを行え」という処理で、10行目からは「セクション3以上に進んだらこれを行え」という処理。最後のelseはそれ以外、「つまりセクション1である場合はこれを行え」という指示を書いています。この条件分岐を応用すればユーザーにも見やすいナビを提供することができますね。この場合はセクションが番号になっているので別の書き方もあると思いますが、セクションの名前なんて色々つけているでしょうから、こういう風にしてみました。サンプルデモあります。サンプルはPCでこちらからご覧下さいませ。Form7】メッセージの送信に失敗しました。後でまたお試しください。(32)PREVNEXTCONTACTホームページでの集客やWeb全般・スマートフォンアプリ制作などに関するご相談はお問い合わせフォームをご利用ください。ご相談いただいた後でも、弊社から営業などの売り込みを行うことは一切ありませんのでご安心ください。ご相談・お問い合わせはこちらお電話でのお問い合わせは、0952-20-1501平日10:00~18:00まで。セールス目的のお電話はご遠慮ください。