Cacher is the code snippet organizer for pro developers

const TRANSITION_END = 'transitionend';

export default class Nav {
	constructor() {
		this.$target = $('#js-nav');
		this.$hamburger = $('#js-hamburger');
		this.$main = $('#js-main');
		this.$body = $('body');
		this.$window = $(window);
		this.scrollPos;
	}
	init() {
		this.bindEvent();
	}
	bindEvent() {
		this.$hamburger.on('click', (e) => {
			e.preventDefault();
			this.slideManager();
			// 再bind防止のためunbind
			this.$target.off(TRANSITION_END);
			this.slideToggle();
		});
	}
	slideManager() {
		this.slideToggle = this.$body.hasClass('is-active') ? this.slideClose : this.slideOpen;
	}
	slideOpen() {
		if(this.$body.hasClass('is-active')) {
			return;
		}
		// スクロール位置を保存
		this.scrollPos = this.$window.scrollTop();

		this.$body.addClass('is-active');

		// 閉じるときの位置の記憶を解除
		this.$main.css({
			'top': -this.$window.scrollTop()
		});
		this.$target.on(TRANSITION_END, () => {
			// android4.4.2で、fixedからabsoluteが正しくレンダリングされないバグアあるので、一度relativeでfixedを解除
			this.$target.css({
				'position': 'relative',
				'background-color': 'rgba(0, 0, 0, 0.5)'
			});
			// 開ききった後にabsoluteを設定することで横スクロールバーが出るのを防止
			setTimeout(() => {
				this.$target.css({'position': 'absolute'});
			}, 300);
		});
	}
	slideClose() {
		if(!this.$body.hasClass('is-active')) {
			return;
		}
		this.$body.removeClass('is-active');
		this.$target.css({
			'position': '',
			'background-color': ''
		});
		this.$main.css({
			'top': ''
		});
		$('html, body').animate({
			scrollTop: this.scrollPos
		}, 0);
	}
}

<header id="js-header" class="l-header">
    <<% if(data.id === 'top') { %>h1<% } else { %>div<% } %> class="logo">
        <a href="./"><%- include('svg/logo.svg') %></a>
    </<% if(data.id === 'top') { %>h1<% } else { %>div<% } %>>
    <div class="hamburger" id="js-hamburger">
        <div class="hamburger-inner">
            <span class="hamburger-line hamburger-line1"></span>
            <span class="hamburger-line hamburger-line2"></span>
            <span class="hamburger-line hamburger-line3"></span>
        </div>
    </div>
</header>
<div id="js-nav" class="l-nav">
  <div class="nav-sp">
    <nav>
      <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">NEWS</a></li>
        <li><a href="">CONTACT</a></li>
      </ul>
    </nav>
  </div>
</div>

.nav-sp {}
.nav-sp-list {
	li {
		a {
			display: block;
		}
	}
}
.nav-btn-area {
	padding: 18px 20px;
	a {
		width: 90px;
		height: 34px;
		padding: 4px 6px;
		.btn-txt {
			font-size: 14px;
		}
	}
}

.l-nav {
	min-height: 100%;
	width: 100%;
	position: fixed;
	top: 60px;
	z-index: 10;
	transform: translate3d(100%, 0, 10px);
	transition: transform 0.35s ease-in-out, background-color 0.35s ease-in-out;
	background-color: rgba(0, 0, 0, 0);
}
body.is-active {
	.l-nav {
		transform: translate3d(0, 0, 10px);
	}
}

.l-main {}
.is-active {
	.l-main {
		position: fixed;
	}
}

.hamburger {
	width: 50px;
	height: 50px;
	float: right;
	background-color: $green;
	position: relative;
}
.hamburger-inner {
	width: 20px;
	height: 18px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.hamburger-line {
	position: absolute;
	left: 0;
	background-color: $white;
	&.hamburger-line1 {
		top: 0;
		width: 20px;
		height: 2px;
		opacity: 1;
		transform: translateX(0) scale(1);
		transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s;
	}
	&.hamburger-line2 {
		top: 8px;
		&:before,
		&:after {
			position: absolute;
			top: 0;
			left: 0;
			width: 20px;
			height: 2px;
			background-color: $white;
			transform-origin: center;
			transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
			content: '';
		}
		&:before {
			transform: rotate(0deg);
		}
		&:after {
			transform: rotate(0deg);
		}
	}
	&.hamburger-line3 {
		top: 16px;
		width: 20px;
		height: 2px;
		opacity: 1;
		transform: translateX(0) scale(1);
		transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.08s, opacity 0.3s;
	}
}
body.is-active {
	.hamburger-line1 {
		top: 0;
		opacity: 0;
		transform: translateX(-45px) scale(1);
		transition: transform 0.3s cubic-bezier(0.755, 0.05, 0.855, 0.06), opacity 0.8s 0.05s;
	}
	.hamburger-line2 {
		&:before,
		&:after {
			transition: all 0.3s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.1s;
		}
		&:before {
			transform: rotate(45deg);
		}
		&:after {
			transform: rotate(-45deg);
		}
	}
	.hamburger-line3 {
		top: 16px;
		opacity: 0;
		transform: translateX(-45px) scale(1);
		transition: transform 0.3s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.1s, opacity 1s 0.05s;
	}
}

import Nav from 'module/nav';

let nav = new Nav();
nav.init();