I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > jQuery > スクロールすると特定の位置で固定されて更に スクロールすると固定が解除されるナビゲーションjQuery

スクロールすると特定の位置で固定されて更に スクロールすると固定が解除されるナビゲーションjQuery

当サイトでも実装していますが、ページをスクロールすると特定のナビゲーションを画面の位置に固定し、一定の位置で固定を解除する動きをjQueryで実装します。
コンテンツ量の多い画面では、スクロールすると表示しておきたい要素が消えてしまうこともありますが、固定と固定解除を併用することで効果的な画面を構築できます。

共有リンクや広告要素などを固定表示することで、クリック数増加を補助することができます。

デモ画面

今回は、id="fix_nav"というdiv要素fixedというクラスを使って固定します。
画面をスクロールした時にmenuというIDのdiv要素が画面上部に到達したタイミングでfixedというクラスをつけます。
fixed_notというクラスで固定前のクラスを指定し、fixed_releaceというクラスで固定後のクラスを指定します。

headタグ内に下記スクリプトとソースを挿入してください。

jqueryサンプル
    <script>
        jQuery(function() {
        //ページトップからの高さを取得
            var fixnav_top = jQuery("div#fixnav").offset().top;
            var fixnav_bottom = jQuery("div#fixnav").offset().bottom;
            var fixnav_height = jQuery("div#fixnav").height();
        //コンテンツの高さを取得
            var content_height = jQuery("div#content").height();
            var footer_top = jQuery("div#footer").offset().top;
        // 読み込み時に開いたウィンドウの高さを取得
            var window_height = jQuery(window).height();
        // ウィンドウのサイズを変えたときの高さを取得
            jQuery(window).resize(function(){
                window_height = jQuery(this).height();
            });
        // スクロールされるごとに現在の位置を計算し、Classを付与・除去する。
            jQuery(window).scroll(function(){
                var scroll_height = jQuery(this).scrollTop();
                if (scroll_height < fixnav_top) {
                    jQuery("div#fixnav").removeClass("fixed");
                    jQuery("div#fixnav").removeClass("fixed_releace");
                    jQuery("div#fixnav").addClass("fixed_not");
                } else if (scroll_height > fixnav_top && scroll_height < footer_top - fixnav_height) {
                    jQuery("div#fixnav").removeClass("fixed_not");
                    jQuery("div#fixnav").removeClass("fixed_releace");
                    jQuery("div#fixnav").addClass("fixed");
                } else {
                    jQuery("div#fixnav").removeClass("fixed");
                    jQuery("div#fixnav").removeClass("fixed_releace");
                    jQuery("div#fixnav").addClass("fixed_releace");
                }
            });
        });
    </script>
CSSサンプル
    <style type="text/css">
        #fixnav{height: 400px;}
        .fixed_not{position: relative; top: 0;}
        .fixed{position: fixed; top: 0;}
        .fixed_releace{position: absolute; bottom: 420px;}
    </style>

CSSで固定するdiv要素の高さを指定して下さい。
また、固定後のfixed_releaceクラスで固定を止める高さを指定してください。
今回は、固定するdiv要素の高さを400ピクセルとし、画面最下部から420ピクセルのところで固定を解除しています。

記事移動

関連記事

CSSとjQueryで作るメニュー表示時にコンテンツのスクロールをさせないドロワーメニュー

レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」

レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」

jQueryプラグイン「Infinite Scroll」と「Masonry」を利用して無限スクロールのギャラリーを作成する方法

Masonryを利用した時要素が重なるなどうまく並び変えられない場合の「imageLoaded」を利用した対処法

要素をタイル状に表示する超有名jQueryプラグイン「Masonry」の基本的な使い方

フルスクリーンで背景を表示するスライドショーにも対応可能なjQueryプラグイン「MaxImage2」

フルスクリーンで背景を表示するスライドショーにも対応可能なjQueryプラグイン「MaxImage2」

Comment Form

  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Restriction
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)【I'll be NET】

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

Feed

Tagcloud