waypoint-sticky.js

	// ==================================================
	// Sticky header
	// ==================================================

	var timer = false;
	var waypoint = undefined;
	var paddingTop = 0;
	var window_width = 0;
	var $nav = $('.js-sticky');
	function calNavHeight() {
		return ['.l-site-heaer-top','.l-site-header .wrap-site-logo',
		].map(function(selector) {
			return $(selector).outerHeight(true);
		}).reduce(function(a, b) { return a + b });
	} 
	function sticky() {	
		console.log('sticky');
		return  $('#stickyWrapper').waypoint({
			//element: document.getElementById('stickyWrapper'),
			handler: function(d) {
				paddingTop = calNavHeight();
				//when resize from SP to PC
				if(window_width >= 960) {
					if(d === 'down') {
						$nav.addClass('l-sticky');
						$('body').css({ paddingTop: paddingTop });
					} else {
						$nav.removeClass('l-sticky');
						$('body').css({ paddingTop: '' });
					}	
				}		
			}
		});	
	}

	$(window).on('load', function() {	
		window_width = $(window).width();
		if(window_width>960) {
			//PC
			waypoint = sticky();
			console.log(waypoint);
		}
	});
	//window resize
	$(window).resize(function() {
	  if (timer !== false) {
		clearTimeout(timer);
	  }
	  timer = setTimeout(function() {
		window_width = $(window).width();
		if(window_width < 960) {
			//SP
			$('.js-sticky').removeClass('l-sticky');
			$('body').css({ paddingTop: '' });	
		} else {
			//PC
			Waypoint.refreshAll();
			// if header is scroll down over padding top
			if($(window).scrollTop() > paddingTop) {
				$nav.addClass('l-sticky');
				$('body').css({ paddingTop: paddingTop });
			}
		}
		// 何らかの処理
	  }, 100);
	});