From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 4 Apr 2012 15:45:14 +0000 (+0200)
Subject: Top menu becomes less opaque while you scroll down
X-Git-Tag: 2.0.0_Beta_1~1167^2
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=f5d7991a9d4c89ee8d5e07d86df966193f80032e;p=GitHub%2FWoltLab%2FWCF.git

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 :)
---

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;