パララックスなどにあるスクロール位置でcurrent表示を切り替える固定メニューを作る

2014/11/2 2016/1/25 Animation, JS/jQuery, UI/UX

パララックスなどによく付いている固定メニューに、現在の位置を示すcurrent表示を付与する方法です。
まずは下記DEMOからどうぞ。

DEMO

今回の方法はスクロール時に各SECTIONの高さを判別してclass="current"を付与するコードが中心になります。ポイントはhover時の挙動とバッティングしないようにする所と、SECTIONの切り替え(アニメーション)をしている最中functionを発動させない所だと思います。

高さ判別

    var	SECTION1 = 0,
        SECTION2 = 1000,
        SECTION3 = 2000,
        SECTION4 = 3000,
        SECTION5 = 4000;
    function currentPosMenu(){
        var scrollNum  = $(this).scrollTop()
        if(scrollNum >= SECTION1 && scrollNum <= SECTION2){
                animateIn($("#section1"),$('.menu1'))
        }
        if(scrollNum >= SECTION2 && scrollNum <= SECTION3){
                animateIn($("#section2"),$('.menu2'))
        }
        if(scrollNum >= SECTION3 && scrollNum <= SECTION4){
                animateIn($("#section3"),$('.menu3'))
        }
        if(scrollNum >= SECTION4 && scrollNum <= SECTION5){
                animateIn($("#section4"),$('.menu4'))
        }
    }

SECTION～SECTIONで条件分岐しています。

hover時のコード

    $('#SideMenuInner li').each(function(){
        var listElem = $(this).children('a')
            $(this).hover(function(){
                listElem.css({left: '1px'})
            },function(){
                if(listElem.is('.current')){
                    listElem.css({left: '1px'})
                }else{
                    listElem.css({left: '214px'})
                }
            })
    });

currentクラスを持っているかどうかで条件分岐しています。

高さ判別の際に起動させるfunction

　　var delay = false;
    $(window).scroll(function() {
		if($('html,body').is(':animated')){
			if (delay !== false) {
				clearTimeout(delay);
			}
			delay = setTimeout(function() {
				currentPosMenu()
			}, 200);
		}else{
		 	currentPosMenu()
		}
    });

メニューをクリックして移動(scrollアニメ)している際にはcurrentPosMenuが起動しないように移動が終わったときにだけ起動させる条件分岐しています。

そういえばハロウィンもおわりましたが、今年は一段とコスプレ民が目に付きましたね。だんだん定着してきてるのが怖い。。。

enumblog