タグ別アーカイブ: scroll

横に固定されるメニュー

今までにもメニューの固定化をしてみましたが今回はサイドメニューです。
固定でサイドメニューを表示して、ページ位置ごと表示内容をハイライトしてみます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                var menuMargin = 100;
                $(window).scroll(function () {
                    var classCnt = 0;
                    var nowTop   = 0;
                    var srcTop   = $(this).scrollTop();
                    $('#main_area div').each( function(cnt) {
                        nowTop = $(this).offset().top + $(this).height() - menuMargin;
                        if (srcTop < nowTop) {
                            $('div.menu_point').removeClass('active');
                            classCnt = cnt + 1;
                            $('#menu_' + classCnt).addClass('active');
                            return false;
                        }
                    });
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div#menu_area {
                position         : fixed;
                top              : 0;
                right            : 0;
                z-index          : 9999;
                background-color : #ffffff;
            }

            div#menu_area .menu_point {
                border           : solid 1px #000000;
                margin           : 5px;
                padding          : 5px;
            }

            div#menu_area .active {
                color            : #ffffff;
                background-color : #00ff00;
            }

            div.disp_area {
                height           : 1000px;
                border           : solid 1px #000000;
                margin           : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="menu_area">
            <div id="menu_1" class="menu_point"><a href="#point_1">div area 1</a></div>
            <div id="menu_2" class="menu_point"><a href="#point_2">div area 2</a></div>
            <div id="menu_3" class="menu_point"><a href="#point_3">div area 3</a></div>
            <div id="menu_4" class="menu_point"><a href="#point_4">div area 4</a></div>
            <div id="menu_5" class="menu_point"><a href="#point_5">div area 5</a></div>
            <div id="menu_6" class="menu_point"><a href="#point_6">div area 6</a></div>
            <div id="menu_7" class="menu_point"><a href="#point_7">div area 7</a></div>
            <div id="menu_8" class="menu_point"><a href="#point_8">div area 8</a></div>
            <div id="menu_9" class="menu_point"><a href="#point_9">div area 9</a></div>
        </div>
        <div id="main_area">
            <h1>Page area</h1>
            <div id="point_1" class="disp_area"><h2>div area 1</h2></div>
            <div id="point_2" class="disp_area"><h2>div area 2</h2></div>
            <div id="point_3" class="disp_area"><h2>div area 3</h2></div>
            <div id="point_4" class="disp_area"><h2>div area 4</h2></div>
            <div id="point_5" class="disp_area"><h2>div area 5</h2></div>
            <div id="point_6" class="disp_area"><h2>div area 6</h2></div>
            <div id="point_7" class="disp_area"><h2>div area 7</h2></div>
            <div id="point_8" class="disp_area"><h2>div area 8</h2></div>
            <div id="point_9" class="disp_area"><h2>div area 9</h2></div>
        </div>

    </body>
</html>

sample

sample を下に scroll していくと表示内容によって menu 部分の色が変わります。
もちろん menu ですので click すれば対象の部分を表示できます。

現在表示中のページ位置を表示できます。
menu 用の div に対して class を設定しているだけですので色を変えるだけではなく
文字の表示内容を変えたりも出来ます。

今後はパララックス効果などの多様がありますので、使用する機会が無いかもしれません。
それでも使い方さえ間違えなければ役に立つ機能だと思います。
ぜひお試しください。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

上部に固定されるメニュー(2)

今回はページ上部に固定されるメニューの亜種です。
以前に上部に固定されるメニューを作成しましたが、ちょっと変形したものを作りました。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--
            $(function() {

                var menuBox = $('#menu_box');
                var topPoint;
                $(window).scroll(function () {

                    var winTop = $(this).scrollTop();
                    if (winTop < 50) {
                        menuBox.slideDown();
                        menuBox.addClass('menu_fixed');
                    } else {
                        if (topPoint > winTop) {
                            menuBox.slideDown();
                            menuBox.addClass('menu_fixed');
                        } else {
                            menuBox.slideUp();
                            menuBox.removeClass('menu_fixed');
                        }
                    }
                    topPoint = winTop;

                });


            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #menu_box {
                width            : 100%;
                background-color : #ffffff;
            }
            .menu_fixed {
                position         : fixed;
                top              : 0;
                left             : 0;
                z-index          : 9999;
                
                filter:alpha(opacity=50);
                -moz-opacity: 0.5;
                opacity: 0.5;
                
            }
            
            #menu_items {
                width            : 200px;
                margin           : 0 auto;
                padding          : 20px;
            }
            
            .disp_box {
                width            : 100%;
                height           : 1500px;
            }
            #disp_box1 {
                background-color : #ffcccc;
            }
            #disp_box2 {
                background-color : #ccffcc;
            }
            #disp_box3 {
                background-color : #ccccff;
            }
            #disp_box4 {
                background-color : #ccffff;
            }

        --></style>

    </head>
    <body>

        <div id="menu_box">
            <div id="menu_items">
                <a href="#disp_box1">Box1</a>
                <a href="#disp_box2">Box2</a>
                <a href="#disp_box3">Box3</a>
                <a href="#disp_box4">Box4</a>
            </div>
        </div>

        <div id="disp_box1" class="disp_box">Display Box1 Area</div>
        <div id="disp_box2" class="disp_box">Display Box2 Area</div>
        <div id="disp_box3" class="disp_box">Display Box3 Area</div>
        <div id="disp_box4" class="disp_box">Display Box4 Area</div>

    </body>
</html>

sample

smaple ページを開いた時点では特に何もありません。
画面下に向けてスクロールするとメニューも表示が消えていきます。

ここまでだと、jQuery を使用していない場合と同じです。
但し、スクロールを少しでも上に戻すと常にメニューが表示されるようになります。
上部に向けたスクロール中は常に上部に固定されます。

・・・結構いいですね。
サイトが綺麗になるほどメニューを画面上に表示するかを悩むかと思います。
普段は表示されなくても、メニューを表示したい場合はすぐに使える。
中々便利だと思います。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

class の追加,削除について

今回は jQuery の処理を確認している時に見つけた toggleClass についてです。

以前にも addClass, removeClass を利用した class の追加,削除の機能を作りました。
実は toggleClass を使えば一つの関数でできるようです。
備忘録として保存しておきます。

<html>
    <head>
        <script src="./jquery-1.9.1.min_.js"></script>   
         
        <script type="text/javascript"><!--
            $(function() {
                 
                var menuBox = $('#menu_box');
                $(window).scroll(function () {
                    var winTop = $(this).scrollTop();
                    // メニューの高さを超えた時はメニュー位置を変更
                    menuBox.toggleClass('menu_fixed', (winTop > 0))
                });
                 
            });
        --></script>
         
        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!-- 
            #menu_box {
                width            : 100%;
                background-color : #ffffff;
            }
            .menu_fixed {
                position         : fixed;
                top              : 0;
                left             : 0;
                z-index          : 9999;
                 
                filter:alpha(opacity=50);
                -moz-opacity: 0.5;
                opacity: 0.5;
                 
            }
             
            #menu_items {
                width            : 200px;
                margin           : 0 auto;
                padding          : 20px;
            }
             
            .disp_box {
                width            : 100%;
                height           : 300px;
            }
            #disp_box1 {
                background-color : #ffcccc;
            }
            #disp_box2 {
                background-color : #ccffcc;
            }
            #disp_box3 {
                background-color : #ccccff;
            }
            #disp_box4 {
                background-color : #ccffff;
            }
             
        --></style>
         
    </head>
    <body>
         
        <div id="menu_box">
            <div id="menu_items">
                <a href="#disp_box1">Box1</a>
                <a href="#disp_box2">Box2</a>
                <a href="#disp_box3">Box3</a>
                <a href="#disp_box4">Box4</a>
            </div>
        </div>
         
        <div id="disp_box1" class="disp_box">Display Box1 Area</div>
        <div id="disp_box2" class="disp_box">Display Box2 Area</div>
        <div id="disp_box3" class="disp_box">Display Box3 Area</div>
        <div id="disp_box4" class="disp_box">Display Box4 Area</div>
         
    </body>
</html>

sample

sampleページでスクロールしてもヘッダ部にメニュー固定します。
機能としては以前に作成した上部に固定されるメニューと同じです。

いつもは toggle 関係の処理は使用するのを極力避けています。
ですが toggleClass の場合にはいくつか使い方があるようです。
特に今回使用している switch の機能は if と同じようにできるのでよい感じです。
今回 toggleClass にするために変更した部分は以下の通りです。

var menuBox = $('#menu_box');
$(window).scroll(function () {
    var winTop = $(this).scrollTop();
    if (winTop > 0) {    // メニューの高さを超えた時はメニュー位置を変更
        menuBox.addClass('menu_fixed')
    } else {
        menuBox.removeClass('menu_fixed')
    }
});

 ↓

var menuBox = $('#menu_box');
$(window).scroll(function () {
    var winTop = $(this).scrollTop();
    // メニューの高さを超えた時はメニュー位置を変更
    menuBox.toggleClass('menu_fixed', (winTop > 0))
});

通常は toggleClass(classname) とすると、指定した Object に対して Class の追加削除を行います。
しかし、classname の後に条件分を加えることで、true / false の判定を行い、指定 Class の追加削除ができるようです。

他にも、以下の使い方も可能なようです。
■toggleClass(function)
指定した Object に対して function の帰り値となる classname の追加削除を行います。

色々と使い勝手が良さそうです。
今後は使っていきたいですね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

上部に固定されるメニュー

今回は最近流行りとの情報を聞いたので上部に固定されるメニューを作ってみます。

とりあえず、こんな感じでどうでしょうか。

<html>
    <head>
        <script src="./jquery-1.9.1.min_.js"></script>   
        
        <script type="text/javascript"><!--
            $(function() {
                
                var menuBox = $('#menu_box');
                $(window).scroll(function () {
                    var winTop = $(this).scrollTop();
                    if (winTop > 0) {    // メニューの高さを超えた時はメニュー位置を変更
                        menuBox.addClass('menu_fixed')
                    } else {
                        menuBox.removeClass('menu_fixed')
                    }
                });
                
            });
        --></script>
        
        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!-- 
            #menu_box {
                width            : 100%;
                background-color : #ffffff;
            }
            .menu_fixed {
                position         : fixed;
                top              : 0;
                left             : 0;
                z-index          : 9999;
                
                filter:alpha(opacity=50);
                -moz-opacity: 0.5;
                opacity: 0.5;
                
            }
            
            #menu_items {
                width            : 200px;
                margin           : 0 auto;
                padding          : 20px;
            }
            
            .disp_box {
                width            : 100%;
                height           : 300px;
            }
            #disp_box1 {
                background-color : #ffcccc;
            }
            #disp_box2 {
                background-color : #ccffcc;
            }
            #disp_box3 {
                background-color : #ccccff;
            }
            #disp_box4 {
                background-color : #ccffff;
            }
            
        --></style>
        
    </head>
    <body>
        
        <div id="menu_box">
            <div id="menu_items">
                <a href="#disp_box1">Box1</a>
                <a href="#disp_box2">Box2</a>
                <a href="#disp_box3">Box3</a>
                <a href="#disp_box4">Box4</a>
            </div>
        </div>
        
        <div id="disp_box1" class="disp_box">Display Box1 Area</div>
        <div id="disp_box2" class="disp_box">Display Box2 Area</div>
        <div id="disp_box3" class="disp_box">Display Box3 Area</div>
        <div id="disp_box4" class="disp_box">Display Box4 Area</div>
        
    </body>
</html>

sample

こんな形でメニューを上部に固定することが出来ました。
やってることは結構簡単です。

画面がスクロールされてページトップでない場合に、メニューを固定する class を追加しています。
もちろんページトップに戻った場合には、メニューを固定する class は削除します。

あとは、オマケですが、ページトップで無い場合にはメニューの透明度を変更しています。
※ここはスタイルシートの設定なので Javascript は関係有りませんね・・・

これで、トップメニューの固定は出来ました。
ちょっと変更すれば、「ページ位置によっては表示させない」なども出来そうですね。
他にも必要な機能があれば、今後追加をして行きたいと思います。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。