Twenty Fifteen: If the sidebar is taller than the viewport scroll it with the content, if it's shorter keep it fixed.

Props mattwiebe, iamtakashi, avryl, fixes #29979.



git-svn-id: https://develop.svn.wordpress.org/trunk@30025 602fd350-edb4-49c9-b593-d223f7449a82

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

@@ -6,6 +6,8 @@
  */
 
 ( function( $ ) {
+	var $body, $window, sidebar, toolbarOffset;
+
 	$( 'html' ).removeClass( 'no-js' );
 
 	// Add dropdown toggle that display child menu items.
@@ -47,4 +49,37 @@
 			$( this ).toggleClass( 'toggled-on' );
 		} );
 	} )();
+
+
+	// Sidebar (un)fixing: fix when short, un-fix when scroll needed
+	$body         = $( 'body' );
+	$window       = $( window );
+	sidebar       = $( '#sidebar' )[0];
+	toolbarOffset = $body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
+
+	function fixedOrScrolledSidebar() {
+		if ( $window.width() >= 955 ) {
+			if ( sidebar.scrollHeight < ( $window.height() - toolbarOffset ) ) {
+				$body.addClass( 'sidebar-fixed' );
+			} else {
+				$body.removeClass( 'sidebar-fixed' );
+			}
+		} else {
+			$body.removeClass( 'sidebar-fixed' );
+		}
+	}
+
+	function debouncedFixedOrScrolledSidebar() {
+		var timeout;
+		return function() {
+			clearTimeout( timeout );
+			timeout = setTimeout( function() {
+				timeout = null;
+				fixedOrScrolledSidebar();
+			}, 150 );
+		};
+	}
+
+	$window.on( 'load.twentyfifteen', fixedOrScrolledSidebar ).on( 'resize.twentyfifteen', debouncedFixedOrScrolledSidebar() );
+
 } )( jQuery );

src/wp-content/themes/twentyfifteen/style.css

@@ -3803,13 +3803,17 @@ span > video {
 
 @media screen and (min-width: 59.6875em) {
 	body:before,
-	.site-header,
-	.main-navigation,
-	.social-navigation,
-	.widget {
+	.sidebar-fixed .site-header,
+	.sidebar-fixed .main-navigation,
+	.sidebar-fixed .social-navigation,
+	.sidebar-fixed .widget {
 		-webkit-transform: translateZ(0); /* Fixes flashing bug with scrolling on iOS Safari */
 	}
 
+	.sidebar-fixed .sidebar {
+		position: fixed;
+	}
+
 	body:before {
 		background-color: #fff;
 		box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
@@ -3830,20 +3834,12 @@ span > video {
 
 	.sidebar {
 		float: left;
-		height: 100%;
 		margin-right: -100%;
 		max-width: 413px;
-		overflow-y: scroll;
-		-webkit-overflow-scrolling: touch; /* Enable momentum scrolling on iOS Safari */
-		position: fixed;
+		position: relative;
 		width: 29.4118%;
 	}
 
-	.admin-bar .sidebar {
-		height: -webkit-calc(100% - 32px);
-		height: calc(100% - 32px);
-	}
-
 	.secondary {
 		background-color: transparent;
 		display: block;