2018-04-02

jQueryでナビゲーションを途中で固定し追随させる|コピペで動くサンプル付き

色々なサイトを閲覧していると、サイトをスクロールした際にヘッダーやナビゲーションバーが追随してくるサイトがあるかと思います。この動作はjQueryで行われており、今回はコピペで動くサンプルを利用してこの動作を解説します。

ナビゲーションバーを追随させるjQueryのサンプル

下記コードをコピペし、.htmlの拡張子で保存すれば動作します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>テスト</title>
    <!--JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(function () {
            $(window).scroll(function () {

                if ($(this).scrollTop() > 10) {
                    $('#articles-scroll').addClass('is-fixed');
                } else {
                    $('#articles-scroll').removeClass('is-fixed');
                }
            });
        });

    </script>
    <style>
        /*スクロールしたら、このCSSを適用し、ナビゲーションバーの位置を固定する*/
        .is-fixed {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;
        }

        /*ナビゲーションバーの大きさを設定 固定スクロールには関係ない*/
        .articles-Wrapper {
            text-align: center;
            background-color: black;
            color: white;
            min-width: 1200px;
        }

        /*div要素を横並びにするcss 固定スクロールには関係ない*/
        .flex {
            display: flex;
        }

    </style>
</head>

<body>
    <!--ナビゲーションメニューを指定ピクセルスクロールするとこの部分が固定-->
    <div class="articles-Wrapper" id="articles-scroll">
        <div class="flex">
            <div>メニュー1</div>
            <duv>メニュー2</duv>
        </div>
    </div>
    <!--以下はコンテンツの内容-->
    <div>
        <p>
            ゼロイチはプログラミング、SEO初心者・独学者向けのメディアです。
        </p>
        <p>
            プログラミング言語はRuby Python3が主で
        </p>
        <p>
            フロントエンドはhtml css jquery sassなどの解説記事を投稿しています
        </p>
        <p>
            フロントエンドのjqueryはjavascriptのライブラリで
        </p>
        <p>
            javascriptをシンプルに記載し、拡張機能を利用して容易に動的な動作を実現できます。
        </p>
        <p>
            jQueryは公式サイトからダウンロードする他に、
        </p>
        <p>
            CDNで利用する事もできます。
        </p>
        <p>
            GoogleのCDNを使ったjQueryファイルの読み込み方法
        </p>
        <p>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        </p>
        <p>
            MicrosoftのCDNを使ったjQueryファイルの読み込み方法。
        </p>
        <p>
            <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
        </p>
        <p>
            jQueryのCDNを使ったjQueryファイルの読み込み方法
        </p>
        <p>
            <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        </p>
        <p>
            下記はGoogleのCDNを利用した場合の例になります。
        </p>
        <p>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        </p>
        <p>
            この記事ではスクロールしたら
        </p>
        <p>
        途中でナビゲーションバーを固定する方法を
        </p>
        <p>
        解説しています。
        </p>


        <p>
            その他ゼロイチ ではSEOの記事も公開しています。
        </p>
        <p>
           SEOは自分のサイトを検索サイトで上位に表示されるように対策を行うことを言います。
        </p>
        <p>
            例えば、Googleなどでプログラミングと検索したら、自分のサイトが上位に表示される用にするなどです。
        </p>
        <p>
            ただ、プログラミングのキーワードは検索されるボリュームが多いためなかなか上位に表示されません。
        </p>
        <p>
            その為、大きなキーワードで上位を狙うよりは、「プログラミング ruby」 など
        </p>
        <p>
            複数のキーワードで検索された際に上位に表示されるようにすることを目標とした方がよいです。
        </p>
        <p>
            SEO対策には内部対策と外部対策があります。
        </p>
        <p>
           内部対策は自分のサイトをGoogleに解析してもらいやすくする対策で
        </p>
        <p>
            詳細な対策内容は下記URLに記載しています。
        </p>
        <p>
            https://programming-beginner-zeroichi.jp/articles/82
        </p>
        <p>
            外部対策は
        </p>
        <p>
            他のサイトから自身のサイトをリンクを設定してもらう対策です。
        </p>
        <p>
            一般的に外部対策は直ぐには行うことができません。
        </p>
        <p>
            理由はコンテンツの量が少ないサイトは他サイトでも紹介されないためです。
        </p>
        <p>
            即効性はないですが、今直ぐできる外部対策の詳細は下記リンクを御覧ください
        </p>
        <p>
            https://programming-beginner-zeroichi.jp/articles/81
        </p>

    </div>

</body>
</html>

jQueryの動作解説

$(window).scrollでページがスクロールされたらイベントを発火させるようにします。

(this).scrollTop() > 10)で、ページの上部から１０pxを超えた場合指定ID（articles-scroll）へis-fixedというCSSのクラスを追記します。

10px未満になったら指定ID（articles-scroll）へis-fixedクラスを削除するようにします。

10の数値を変更すれば、固定される際の上下位置を変更できます。

    <script>
        $(function () {
            $(window).scroll(function () {

                if ($(this).scrollTop() > 10) {
                    $('#articles-scroll').addClass('is-fixed');
                } else {
                    $('#articles-scroll').removeClass('is-fixed');
                }
            });
        });

    </script>

CSSのクラスis-fixed の解説

is-fixedは指定要素を固定するために、作成したCSSのクラスです。

        .is-fixed {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;
        }

position: fixed;

top:0

left:0

で固定するページの位置を指定します。上記の場合左と上から0pxの位置に指定要素を固定します。

z-indexはコンテンツの前後位置を設定します。

z-index: 1;にすることで、ナビゲーションバーをスクロールした際に、コンテンツの上にナビゲーションバーが表示されるようにします。

以上になります。

その他コピペで動くサンプル付きのjQueryの解説は下記から

jQueryで指定した挙動でclassを追加・削除する方法を解説|コピペで動くサンプル付き

2018/04/01

初心者向けに解説|SEOの内部対策（内部リンク対策）とは?

2018/04/03

jQueryでひらがなをカナに自動変換し、バリデーションを設定する|コピペで動くサンプル付き