syannu
4/26/2017 - 1:45 AM

サイドメニューの追従

function sideMenuFixed() {
	var sideMenu = $('.mod-menu-side');
	
	// サイドメニューがある時
	if (sideMenu.length) {
		// コンテンツフッターdom, margin
		var contentsFooter = $('.contents-footer');
		var contentsFooterMargin = parseInt(contentsFooter.css('margin-top'));
		// サイドメニューの初期位置, 高さ指定, flag
		var menuOffsetTopDef = sideMenu.offset().top;
		var menuH = sideMenu.height();
		sideMenu.height(menuH);
		var menuFlag;

		$(window).scroll(function() {
			// サイドメニュー上辺位置
			var menuOffsetTop = sideMenu.offset().top;
			// サイドメニュー下辺位置(高さ含め)
			var menuOffsetBtm = menuOffsetTop + menuH;
			// スクロール位置
			var topOfWindow = $(window).scrollTop();
			// コンテンツフッター位置(margin含め)
			var footerOffsetTop = contentsFooter.offset().top - contentsFooterMargin;
			
			// 追従開始
			if (menuOffsetTop <= topOfWindow) {
				sideMenu.addClass('move');
			}
			// サイドメニュー初期位置で追従切り替え
			if (topOfWindow <= menuOffsetTopDef) {
				sideMenu.removeClass('move');
			}
			// コンテンツフッター上で停止
			if (footerOffsetTop <= menuOffsetBtm) {
				menuFlag = 'stop';
				sideMenu.addClass('stop').removeClass('move');
			}
			// 停止後に追従再開
			if (menuFlag == 'stop' && menuOffsetTop >= topOfWindow && menuOffsetTop != topOfWindow) {
				menuFlag = 'move';
				sideMenu.addClass('move').removeClass('stop');
			}
		});
	}
}