From f5d7991a9d4c89ee8d5e07d86df966193f80032e Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 4 Apr 2012 17:45:14 +0200
Subject: [PATCH] Top menu becomes less opaque while you scroll down

We're not that happy with our current solution, the transition isn't that smooth and it causes you to double CSS. Most likely we will change this behavior later, so stop moaning about it :)
---
 com.woltlab.wcf/template/headInclude.tpl    |  1 +
 wcfsetup/install/files/js/WCF.js            | 43 +++++++++++++++++++++
 wcfsetup/install/files/style/userPanel.less |  8 ++++
 3 files changed, 52 insertions(+)

diff --git a/com.woltlab.wcf/template/headInclude.tpl b/com.woltlab.wcf/template/headInclude.tpl
index 4b0c69a7c0..133f485a3d 100644
--- a/com.woltlab.wcf/template/headInclude.tpl
+++ b/com.woltlab.wcf/template/headInclude.tpl
@@ -86,6 +86,7 @@
 		//$('#sidebarContent').wcfSidebar();
 		
 		WCF.Dropdown.init();
+		WCF.Effect.TopMenu.init();
 		
 		{event name='javascriptInit'}
 	});
diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index e4b4efa63a..c552b106a4 100644
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -3475,6 +3475,49 @@ WCF.Effect.BalloonTooltip.prototype = {
 	}
 };
 
+/**
+ * Modifies the top menu's opacity depending on scroll offset, might be removed later.
+ */
+WCF.Effect.TopMenu = {
+		/**
+		 * top menu reference
+		 * @var	jQuery
+		 */
+		_topMenu: null,
+		
+		/**
+		 * window reference
+		 * @var	jQuery
+		 */
+		_window: null,
+		
+		/**
+		 * Initializes the references and scroll event listener.
+		 */
+		init: function() {
+			this._topMenu = $('#topMenu');
+			this._window = $(window);
+			
+			$(document).scroll($.proxy(this._scroll, this));
+		},
+		
+		/**
+		 * Calculates scroll offset and executes dependent actions.
+		 */
+		_scroll: function() {
+			var $topOffset = this._window.scrollTop();
+			if ($topOffset > 200) {
+				this._topMenu.removeClass('userPanelReducedOpacity').addClass('userPanelOpaque');
+			}
+			else if ($topOffset > 100) {
+				this._topMenu.removeClass('userPanelOpaque').addClass('userPanelReducedOpacity');
+			}
+			else {
+				this._topMenu.removeClass('userPanelOpaque').removeClass('userPanelReducedOpacity');
+			}
+		}
+	};
+
 /**
  * Handles clicks outside an overlay, hitting body-tag through bubbling.
  * 
diff --git a/wcfsetup/install/files/style/userPanel.less b/wcfsetup/install/files/style/userPanel.less
index a2d575593a..da3a2fd029 100644
--- a/wcfsetup/install/files/style/userPanel.less
+++ b/wcfsetup/install/files/style/userPanel.less
@@ -20,6 +20,14 @@
 		}
 	}
 	
+	&.userPanelReducedOpacity {
+		background-color: rgba(0, 0, 0, .75);
+	}
+	
+	&.userPanelOpaque {
+		background-color: rgba(0, 0, 0, .9);
+	}
+	
 	ul {
 		display: block;
 		float: left;
-- 
2.20.1