Themes: Improve Twenty Fifteen sticky sidebar logic

The current logic in TwentyFifteen (#30366) for making the sidebar sticky while still allowing to scroll through it when the sidebar height is larger than the viewport height is flawed and massively overcomplicated.
This can be mitigated by removing the admin bar specific logic and leaving most of the heavy lifting up to the browser.

Fixes #37536

Props DvanKooten, lukecavanagh, karmatosed, ianbelanger, davidbaumwald


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


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

wp-content/themes/twentyfifteen/js/functions.js

@@ -6,10 +6,8 @@
  */
 
 ( function( $ ) {
-	var $body, $window, $sidebar, adminbarOffset, top = false,
+	var $body, $window, $sidebar, resizeTimer,
-	    bottom = false, windowWidth, windowHeight, lastWindowPos = 0,
+		secondary, button;
-	    topOffset = 0, bodyHeight, sidebarHeight, resizeTimer,
-	    secondary, button;
 
 	function initMainNavigation( container ) {
 		// Add dropdown toggle that display child menu items.
@@ -96,71 +94,32 @@
 	}
 
 	// Sidebar scrolling.
-	function resize() {
-		windowWidth = $window.width();
-
-		if ( 955 > windowWidth ) {
-			top = bottom = false;
-			$sidebar.removeAttr( 'style' );
-		}
-	}
-
-	function scroll() {
-		var windowPos = $window.scrollTop();
-
-		if ( 955 > windowWidth ) {
-			return;
-		}
-
-		sidebarHeight = $sidebar.height();
-		windowHeight  = $window.height();
-		bodyHeight    = $body.height();
-
-		if ( sidebarHeight + adminbarOffset > windowHeight ) {
-			if ( windowPos > lastWindowPos ) {
-				if ( top ) {
-					top = false;
-					topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
-					$sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
-				} else if ( ! bottom && windowPos + windowHeight > sidebarHeight + $sidebar.offset().top && sidebarHeight + adminbarOffset < bodyHeight ) {
-					bottom = true;
-					$sidebar.attr( 'style', 'position: fixed; bottom: 0;' );
-				}
-			} else if ( windowPos < lastWindowPos ) {
-				if ( bottom ) {
-					bottom = false;
-					topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
-					$sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
-				} else if ( ! top && windowPos + adminbarOffset < $sidebar.offset().top ) {
-					top = true;
-					$sidebar.attr( 'style', 'position: fixed;' );
-				}
-			} else {
-				top = bottom = false;
-				topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
-				$sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
-			}
-		} else if ( ! top ) {
-			top = true;
-			$sidebar.attr( 'style', 'position: fixed;' );
-		}
-
-		lastWindowPos = windowPos;
-	}
-
 	function resizeAndScroll() {
-		resize();
+		var windowPos = $window.scrollTop(),
-		scroll();
+			windowHeight = $window.height(),
+			sidebarHeight = $sidebar.height(),
+			bodyHeight = $body.height();
+
+		if( 955 < $window.width()
+			&& bodyHeight > sidebarHeight
+			&& ( windowPos + windowHeight ) >= sidebarHeight ) {
+
+			$sidebar.css({
+				position: "fixed",
+				bottom: sidebarHeight > windowHeight ? 0 : 'auto'
+			});
+		} else {
+			$sidebar.css('position', 'relative')
+		}
 	}
 
 	$( document ).ready( function() {
 		$body          = $( document.body );
 		$window        = $( window );
 		$sidebar       = $( '#sidebar' ).first();
-		adminbarOffset = $body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
 
 		$window
-			.on( 'scroll.twentyfifteen', scroll )
+			.on( 'scroll.twentyfifteen', resizeAndScroll )
 			.on( 'load.twentyfifteen', onResizeARIA )
 			.on( 'resize.twentyfifteen', function() {
 				clearTimeout( resizeTimer );
@@ -169,9 +128,7 @@
 			} );
 		$sidebar.on( 'click.twentyfifteen keydown.twentyfifteen', 'button', resizeAndScroll );
 
-		resizeAndScroll();
+		for ( var i = 0; i < 6; i++ ) {
-
-		for ( var i = 1; i < 6; i++ ) {
 			setTimeout( resizeAndScroll, 100 * i );
 		}
 	} );

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.3-beta1-46294';
+$wp_version = '5.3-beta1-46308';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.