Ticket #38850: 38850.patch

src/wp-admin/css/edit.css

@@ -391 +391 @@
         z-index: 999;
 }
 
+.wp-editor-expand .wp-editor-tools {
+        position: sticky;
+        position: -webkit-sticky;
+        top: 32px;
+}
+
+.wp-editor-expand div.mce-toolbar-grp,
+.wp-editor-expand .quicktags-toolbar {
+        position: sticky;
+        position: -webkit-sticky;
+        top: 87px; /* admin bar height + tools height */
+}
+
 /* TinyMCE native fullscreen mode override */
 .mce-fullscreen #wp-content-wrap .mce-menubar,
 .mce-fullscreen #wp-content-wrap .mce-toolbar-grp,

src/wp-admin/js/editor-expand.js

@@ -6 +6 @@
                 $adminBar = $( '#wpadminbar' ),
                 $footer = $( '#wpfooter' );
 
+        var featureSticky = ( function() {
+                var element = document.createElement( 'div' );
+                var style = element.style;
+
+                style.cssText = 'position:sticky;position:-webkit-sticky';
+
+                return !! style.position;
+        } )();
+
         /* Autoresize editor. */
         $( function() {
                 var $wrap = $( '#postdivrich' ),
@@ -333 +342 @@
 
                         if ( ! canPin ) {
                                 if ( resize ) {
+                                        if ( ! featureSticky ) {
                                         $tools.css( {
                                                 position: 'absolute',
                                                 top: 0,
@@ -352 +362 @@
                                                 top: heights.menuBarHeight,
                                                 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
                                         } );
+                                        }
 
                                         $statusBar.attr( 'style', advanced ? '' : 'visibility: hidden;' );
                                         $bottom.attr( 'style', '' );
@@ -365 +376 @@
                                         windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) ) {
                                         fixedTop = true;
 
+                                        if ( ! featureSticky ) {
                                         $tools.css( {
                                                 position: 'fixed',
                                                 top: heights.adminBarHeight,
@@ -384 +396 @@
                                                 top: heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight,
                                                 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
                                         } );
+                                        }
                                 // Maybe unpin the top.
                                 } else if ( fixedTop || resize ) {
                                         // Handle scrolling up.
                                         if ( windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight ) ) {
                                                 fixedTop = false;
 
+                                                if ( ! featureSticky ) {
                                                 $tools.css( {
                                                         position: 'absolute',
                                                         top: 0,
@@ -409 +423 @@
                                                         top: heights.menuBarHeight,
                                                         width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
                                                 } );
+                                                }
                                         // Handle scrolling down.
                                         } else if ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) {
                                                 fixedTop = false;
 
+                                                if ( ! featureSticky ) {
                                                 $tools.css( {
                                                         position: 'absolute',
                                                         top: editorHeight - buffer,
@@ -432 +448 @@
                                                         top: editorHeight - buffer + heights.menuBarHeight,
                                                         width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
                                                 } );
+                                                }
                                         }
                                 }
 
@@ -558 +575 @@
                                 fixedSideTop = fixedSideBottom = false;
                         }
 
-                        if ( resize ) {
+                        if ( resize && ! featureSticky ) {
                                 $contentWrap.css( {
                                         paddingTop: heights.toolsHeight
                                 } );