03 November

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

17 May

ナビゲーションメニューをスクロール位置に応じて点灯したい

http://blog.begoingto.jp/js-scroll-menu/
このサイトのjsがわかりやすいと思いました
offset.topの数値はメニューの位置にあわせて変える

css

#header {
    position: fixed;
    width: 100%;
    height: 50px;
    top: 0;
    text-align: center;
    background: rgba(180, 180, 180, 0.9);
    border-bottom: 1px solid #ccc;
}

$(function() {
    /**
     * ページ内スクロール
     */
    $('a[href^=#]').click(function(){
        var speed = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top - 50;
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});




$(function() {
 
    /**
     * 現在スクロール位置によるグローバルナビのアクティブ表示
     */
    var scrollMenu = function() {
        // 配列宣言
        // ここにスクロールで点灯させる箇所のidを記述する
        // 数値は全て0でOK
        var array = {
            '#top': 0,
            '#menu-1': 0,
            '#menu-2': 0,
            '#menu-3': 0,
            '#menu-4': 0,
            '#menu-5': 0
        };
 
        var $globalNavi = new Array();
 
        // 各要素のスクロール値を保存
        for (var key in array) {
            if ($(key).offset()) {
                array[key] = $(key).offset().top - 10; // 数値丁度だとずれるので10px余裕を作る
                $globalNavi[key] = $('#header ul li a[href="' + key + '"]');
            }
        }
 
        // スクロールイベントで判定
        $(window).scroll(function () {
            for (var key in array) {
                if ($(window).scrollTop() > array[key] - 50) {
                    $('#header ul li a').each(function() {
                        $(this).removeClass('active');
                    });
                    $globalNavi[key].addClass('active');
                }
            }
        });
    }
 
    // 実行
    scrollMenu();
});