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 4b0c69a7c0a27fb265b9bd7095be1e721965dccf..133f485a3d205bdb649697a64483992bb04eed91 100644 (file)
--- 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 e4b4efa63a80182232502505e76bf8c06849fb91..c552b106a4786728497f71a1e3ab9883e771a7f4 100644 (file)
--- 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 a2d575593a6f330ed96ed198d029cac5f3b5aecf..da3a2fd029ba343e5668ddc904dc9468fbf8e00a 100644 (file)
--- 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;