From 898d8cfe6d5fb960826b2729eb2f747671efd558 Mon Sep 17 00:00:00 2001
From: MinSoo Kim <misol.kr@gmail.com>
Date: Mon, 17 Oct 2016 00:13:18 +0900
Subject: [PATCH] Detect scroll up or down for display menu toggle for mobile
 screen

Mobile screen is small. On the screen, the toggle can the hide content.
Detect user's scroll and display the menu when user need it.
---
 layouts/simple_world/layout.js | 69 ++++++++++++++++++++++++++--------
 1 file changed, 54 insertions(+), 15 deletions(-)

diff --git a/layouts/simple_world/layout.js b/layouts/simple_world/layout.js
index 75279a012..8935d57f7 100644
--- a/layouts/simple_world/layout.js
+++ b/layouts/simple_world/layout.js
@@ -1,15 +1,20 @@
-$(function() {
+$(function()
+{
 	"use strict";
 
 	/* adjust the width of the right member menu */
-	var menu_width = function() {
-		if($('#layout_gnb>ul>li:first-child').width() > 50) {
+	var menu_width = function()
+	{
+		if($('#layout_gnb>ul>li:first-child').width() > 50)
+		{
 			$('#layout_gnb>ul>li:first-child .layout_dropdown-content, #layout_gnb>ul>li:first-child .layout_dropdown-content a').css('width', $('#layout_gnb>ul>li:first-child').width()).css('min-width', $('#layout_gnb>ul>li:first-child').width());
 		}
 	}
 
-	$( window ).resize(function() {
-		if($('#layout_gnb>ul>li:first-child').width() > 50) {
+	$( window ).resize(function()
+	{
+		if($('#layout_gnb>ul>li:first-child').width() > 50)
+		{
 			menu_width();
 		}
 	});
@@ -17,32 +22,65 @@ $(function() {
 	menu_width();
 
 	/* mobile hamburger menu toggle */
-	$(".layout_mobile_menu").each(function() {
-		$( this ).click(function( event ) {
+	$(".layout_mobile_menu").each(function()
+	{
+		$( this ).click(function( event )
+		{
 			event.preventDefault();
 			layout_toggleMenuOpener( $( this ).get(0) );
 		});
 	});
 
+	/* detect scrolling up or down to hide or show hamburger menu */
+	var previousScroll = 0;
+	$( window ).scroll(function()
+	{
+		var currentScroll = $(this).scrollTop();
+		if (currentScroll > previousScroll)
+		{
+			if($("#layout_menu_toggle").attr('data-scroll-down') !== 'true')
+			{
+				$("#layout_menu_toggle").attr('data-scroll-down', 'true');
+				$("#layout_menu_toggle").fadeOut();
+			}
+		}
+		else
+		{
+			if($("#layout_menu_toggle").attr('data-scroll-down') === 'true')
+			{
+				$("#layout_menu_toggle").attr('data-scroll-down', '');
+				$("#layout_menu_toggle").fadeIn();
+			}
+		}
+		previousScroll = currentScroll;
+	});
+
 	/* keyboard accessibility for dropdown menu */
-	$(".layout_dropdown").each(function() {
-		$( this ).focusin( function( event ) {
+	$(".layout_dropdown").each(function()
+	{
+		$( this ).focusin( function( event )
+		{
 			$( this ).addClass('layout_focus');
 			$( this ).find("ul.layout_dropdown-content").css('display', 'block').attr('data-dropdown', 'active');
 		});
 	});
 
-	$('body').focusin(function( event ) {
-		if (!$(event.target).parents('.layout_dropdown').is('.layout_dropdown')) {
+	$('body').focusin(function( event )
+	{
+		if (!$(event.target).parents('.layout_dropdown').is('.layout_dropdown'))
+		{
 			$('*[data-dropdown="active"]').css('display', '').attr('data-dropdown', '').parents('li.layout_dropdown').removeClass('layout_focus');
 		}
 	});
 	/* keyboard accessibility for dropdown menu END */
 
-	function layout_toggleMenuOpener(obj) {
-		if(obj.classList.contains("is-active") === true){
+	function layout_toggleMenuOpener(obj)
+	{
+		if(obj.classList.contains("is-active") === true)
+		{
 			var targetMenu = $(obj).attr('data-target');
-			$('#' + targetMenu).slideUp('300', function() {
+			$('#' + targetMenu).slideUp('300', function()
+			{
 				$(this).css('display', '');
 			});
 
@@ -62,7 +100,8 @@ $(function() {
 	}
 
 	// Language Select
-	$('.layout_language>.toggle').click(function(){
+	$('.layout_language>.toggle').click(function()
+	{
 		$('.selectLang').toggle();
 	});
 });
\ No newline at end of file