Ticket #30366: 30366.4.patch

src/wp-content/themes/twentyfifteen/header.php

@@ -47 +47 @@
 
                 <?php get_sidebar(); ?>
         </div><!-- .sidebar -->
-
-        <div id="content" class="site-content">
+        
+        <div id="main-wrapper" class="main-wrapper">
+                <div id="content" class="site-content">
+ No newline at end of file

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

@@ -6 +6 @@
  */
 
 ( function( $ ) {
-        var $body, $window, $document, $sidebar, adminbarOffset, top = false,
+        var $body, $window, $document, $mainWrapper, $sidebar, adminbarOffset, top = false,
                 bottom = false, windowWidth, windowHeight, lastWindowPos = 0,
                 topOffset = 0, documentHeight, sidebarWidth, sidebarHeight, resizeTimer;
 
@@ -55 +55 @@
                 windowWidth = $window.width();
                 windowHeight = $window.height();
                 documentHeight = $document.height();
+                mainWrapperHeight = $mainWrapper.height();
                 sidebarHeight = $sidebar.height();
 
                 if ( 955 >= windowWidth ) {
                         top = bottom = false;
                         $sidebar.removeAttr( 'style' );
+                        $mainWrapper.removeAttr( 'style' );
                 }
         }
-
+        
         function scroll() {
-                var windowPos = $window.scrollTop();
-
-                if ( 955 <= windowWidth && sidebarHeight + adminbarOffset < documentHeight ) {
-                        if ( sidebarHeight + adminbarOffset > windowHeight ) {
+                var windowPos, $pane, paneHeight;
+                windowPos = $window.scrollTop();
+                $pane = ( sidebarHeight > mainWrapperHeight ) ? $mainWrapper : $sidebar;
+                paneHeight = $pane.height();    
+                
+                if ( 955 <= windowWidth && paneHeight + adminbarOffset < documentHeight ) {
+                        if ( paneHeight + 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 ) {
+                                                topOffset = ( $pane.offset().top > 0 ) ? $pane.offset().top - adminbarOffset : 0;
+                                                $pane.attr( 'style', 'top: ' + topOffset + 'px;' );
+                                        } else if ( ! bottom && windowPos + windowHeight > paneHeight + $pane.offset().top ) {
                                                 bottom = true;
-                                                $sidebar.attr( 'style', 'position: fixed;bottom: 0;' );
+                                                $pane.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 ) {
+                                                topOffset = ( $pane.offset().top > 0 ) ? $pane.offset().top - adminbarOffset : 0;
+                                                $pane.attr( 'style', 'top: ' + topOffset + 'px;' );
+                                        } else if ( ! top && windowPos + adminbarOffset < $pane.offset().top ) {
                                                 top = true;
-                                                $sidebar.attr( 'style', 'position: fixed;' );
+                                                $pane.attr( 'style', 'position: fixed;' );
                                         }
                                 } else {
                                         top = bottom = false;
-                                        topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
-                                        $sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
+                                        topOffset = ( $pane.offset().top > 0 ) ? $pane.offset().top - adminbarOffset : 0;
+                                        $pane.attr( 'style', 'top: ' + topOffset + 'px;' );
                                 }
                         } else if ( ! top ) {
                                 top = true;
-                                $sidebar.attr( 'style', 'position: fixed;' );
+                                $pane.attr( 'style', 'position: fixed;' );
                         }
                 }
 
@@ -109 +114 @@
                 $body          = $( 'body' );
                 $window        = $( window );
                 $document      = $( document );
-                $sidebar        = $( '#sidebar' ).first();
+                $mainWrapper   = $( '#main-wrapper' ).first();
+                $sidebar       = $( '#sidebar' ).first();
                 adminbarOffset = $body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
-
+                
                 $window
                         .on( 'scroll.twentyfifteen', scroll )
                         .on( 'resize.twentyfifteen', function() {

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

@@ -1271 +1271 @@
 .comment-content:after,
 .site-content:before,
 .site-content:after,
+.main-wrapper:before,
+.main-wrapper:after,
 .nav-links:before,
 .nav-links:after,
 .comment-navigation:before,
@@ -1288 +1290 @@
 .entry-content:after,
 .comment-content:after,
 .site-content:after,
+.main-wrapper:after,
 .nav-links:after,
 .comment-navigation:after,
 .social-navigation ul:after,
@@ -3967 +3970 @@
                 padding: 8.3333% 0;
         }
 
-        .site-content {
+        .main-wrapper {
                 display: block;
                 float: left;
                 margin-left: 29.4118%;
                 width: 70.5882%;
+                position: relative;
+                margin-bottom: 1.6em;
+                z-index: 10;
         }
 
         body {
@@ -4562 +4568 @@
         }
 
         .site-footer {
-                float: left;
-                margin: 0 0 0 35.2941%;
+                display: block;
                 padding: 0;
-                width: 58.8235%;
         }
 
         .site-info {