Pin the admin menu on scrolling similarly to how the side metaboxes are pinned on the Edit Post screen, first run. See #29806.

Built from https://develop.svn.wordpress.org/trunk@29835


git-svn-id: http://core.svn.wordpress.org/trunk@29599 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/admin-menu-rtl.css

@@ -15,7 +15,7 @@
 
 #adminmenu {
 	clear: right;
-	margin: 12px 0 0;
+	margin: 12px 0;
 	padding: 0;
 	list-style: none;
 }

wp-admin/css/admin-menu.css

@@ -15,7 +15,7 @@
 
 #adminmenu {
 	clear: left;
-	margin: 12px 0 0;
+	margin: 12px 0;
 	padding: 0;
 	list-style: none;
 }

wp-admin/js/common.js

@@ -550,48 +550,109 @@ $(document).ready( function() {
 		$window = $( window ),
 		$body = $( document.body ),
 		$adminMenuWrap = $( '#adminmenuwrap' ),
-		$collapseMenu = $( '#collapse-menu' ),
 		$wpwrap = $( '#wpwrap' ),
 		$adminmenu = $( '#adminmenu' ),
 		$overlay = $( '#wp-responsive-overlay' ),
 		$toolbar = $( '#wp-toolbar' ),
 		$toolbarPopups = $toolbar.find( 'a[aria-haspopup="true"]' ),
 		$sortables = $('.meta-box-sortables'),
-		stickyMenuActive = false,
-		wpResponsiveActive = false;
+		wpResponsiveActive = false,
+		$adminbar = $( '#wpadminbar' ),
+		lastScrollPosition = 0,
+		fixedMenuTop = false,
+		fixedMenuBottom = false,
+		menuTop = 0,
+		height = {
+			window: $window.height(),
+			adminbar: $adminbar.height(),
+			menu: $adminMenuWrap.height()
+		};
 
-	window.stickyMenu = {
-		enable: function() {
-			if ( ! stickyMenuActive ) {
-				$document.on( 'wp-window-resized.sticky-menu', $.proxy( this.update, this ) );
-				$collapseMenu.on( 'click.sticky-menu', $.proxy( this.update, this ) );
-				this.update();
-				stickyMenuActive = true;
-			}
-		},
+	function pinMenu() {
+		var windowPos = $window.scrollTop();
 
-		disable: function() {
-			if ( stickyMenuActive ) {
-				$window.off( 'resize.sticky-menu' );
-				$collapseMenu.off( 'click.sticky-menu' );
-				$body.removeClass( 'sticky-menu' );
-				stickyMenuActive = false;
-			}
-		},
+		if ( $adminmenu.data('wp-responsive') ) {
+			return;
+		}
 
-		update: function() {
-			// Make the admin menu sticky if the viewport is taller than it
-			if ( $window.height() > $adminMenuWrap.height() + 32 ) {
-				if ( ! $body.hasClass( 'sticky-menu' ) ) {
-					$body.addClass( 'sticky-menu' );
+		if ( height.menu + height.adminbar > height.window ) {
+			if ( windowPos > lastScrollPosition ) {
+				// Scrolling down
+				if ( fixedMenuTop ) {
+					// let it scroll
+					fixedMenuTop = false;
+					menuTop = $adminMenuWrap.offset().top - height.adminbar;
+
+					$adminMenuWrap.css({
+						position: 'absolute',
+						top: menuTop,
+						bottom: ''
+					});
+				} else if ( ! fixedMenuBottom && $adminMenuWrap.offset().top + height.menu < windowPos + height.window ) {
+					// pin the bottom
+					fixedMenuBottom = true;
+
+					$adminMenuWrap.css({
+						position: 'fixed',
+						top: '',
+						bottom: 0
+					});
 				}
-			} else {
-				if ( $body.hasClass( 'sticky-menu' ) ) {
-					$body.removeClass( 'sticky-menu' );
+			} else if ( windowPos < lastScrollPosition ) {
+				// Scrolling up
+				if ( fixedMenuBottom ) {
+					// let it scroll
+					fixedMenuBottom = false;
+					menuTop = $adminMenuWrap.offset().top - height.adminbar;
+
+					$adminMenuWrap.css({
+						position: 'absolute',
+						top: menuTop,
+						bottom: ''
+					});
+				} else if ( ! fixedMenuTop && $adminMenuWrap.offset().top >= windowPos + height.adminbar ) {
+					// pin the top
+					fixedMenuTop = true;
+
+					$adminMenuWrap.css({
+						position: 'fixed',
+						top: '',
+						bottom: ''
+					});
 				}
 			}
 		}
-	};
+
+		lastScrollPosition = windowPos;
+	}
+
+	function setPinMenu() {
+		if ( $adminmenu.data('wp-responsive') ) {
+			$body.removeClass( 'sticky-menu' );
+			$adminMenuWrap.css({
+				position: '',
+				top: '',
+				bottom: ''
+			});
+		} else if ( height.menu + height.adminbar > height.window ) {
+			$body.removeClass( 'sticky-menu' );
+			pinMenu();
+		} else {
+			$body.addClass( 'sticky-menu' );
+		}
+	}
+
+	setPinMenu();
+	$window.on( 'scroll.pin-menu', pinMenu );
+
+	$document.on( 'wp-window-resized.pin-menu', function() {
+		height.window = $window.height();
+		height.adminbar = $adminbar.height();
+		setPinMenu();
+	}).on( 'wp-collapse-menu.pin-menu', function() {
+		height.menu = $adminMenuWrap.height();
+		setPinMenu();
+	});
 
 	window.wpResponsive = {
 		init: function() {
@@ -642,7 +703,7 @@ $(document).ready( function() {
 		},
 
 		activate: function() {
-			window.stickyMenu.disable();
+			setPinMenu();
 
 			if ( ! $body.hasClass( 'auto-fold' ) ) {
 				$body.addClass( 'auto-fold' );
@@ -653,7 +714,7 @@ $(document).ready( function() {
 		},
 
 		deactivate: function() {
-			window.stickyMenu.enable();
+			setPinMenu();
 			$adminmenu.removeData('wp-responsive');
 			this.enableSortables();
 		},
@@ -726,7 +787,6 @@ $(document).ready( function() {
 		}
 	};
 
-	window.stickyMenu.enable();
 	window.wpResponsive.init();
 });
 

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.1-alpha-20141004';
+$wp_version = '4.1-alpha-20141005';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.