WordPress.org

Make WordPress Core


Ignore:
Timestamp:
11/13/2017 10:28:20 PM (18 months ago)
Author:
westonruter
Message:

About: Fix jumping behavior for titles and columns when scrolling.

Props ryelle.
See #42087.
Fixes #42514, #42526.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/about.php

    r42159 r42173  
    5454
    5555        <div class="floating-header-section">
    56             <h2><?php _e( 'Customizer Workflow Improved' ); ?></h2>
     56            <div class="section-header">
     57                <h2><?php _e( 'Customizer Workflow Improved' ); ?></h2>
     58            </div>
    5759
    5860            <div class="section-content">
     
    8991
    9092        <div class="floating-header-section">
    91             <h2><?php _e( 'Coding Enhancements' ); ?></h2>
     93            <div class="section-header">
     94                <h2><?php _e( 'Coding Enhancements' ); ?></h2>
     95            </div>
    9296
    9397            <div class="section-content">
     
    117121
    118122        <div class="floating-header-section">
    119             <h2><?php _e( 'Even More Widget Updates' ); ?></h2>
     123            <div class="section-header">
     124                <h2><?php _e( 'Even More Widget Updates' ); ?></h2>
     125            </div>
    120126
    121127            <div class="section-content">
     
    138144
    139145        <div class="floating-header-section">
    140             <h2><?php _e( 'Site Building Improvements' ); ?></h2>
     146            <div class="section-header">
     147                <h2><?php _e( 'Site Building Improvements' ); ?></h2>
     148            </div>
    141149
    142150            <div class="section-content">
     
    243251                }
    244252
    245                 var adjustScrollClass = _.throttle( function adjustScrollClass() {
     253                function setup() {
     254                    $sections.each( function( i, section ) {
     255                        var $section = $( section );
     256                        // Set width on header to prevent column jump
     257                        var $header = $section.find('.section-header');
     258                        $header.css( {
     259                            width: $header.innerWidth() + 'px'
     260                        } );
     261
     262                        // If the title is long, switch the layout
     263                        var $title = $section.find( 'h2' );
     264                        if ( $title.innerWidth() > 300 ) {
     265                            $section.addClass( 'has-long-title' );
     266                        }
     267                    } );
     268                }
     269
     270                var adjustScrollPosition = _.throttle( function adjustScrollPosition() {
    246271                    $sections.each( function( i, section ) {
    247272                        var $section = $( section );
    248273                        var $header = $section.find( 'h2' );
    249274                        var width = $header.innerWidth();
     275                        var height = $header.innerHeight();
     276
     277                        if ( $section.hasClass( 'has-long-title' ) ) {
     278                            return;
     279                        }
    250280
    251281                        var sectionStart = $section.offset().top - offset;
    252                         var sectionEnd = sectionStart + $section.innerHeight() - 60;
     282                        var sectionEnd = sectionStart + $section.innerHeight();
     283                        var scrollPos = $window.scrollTop();
    253284
    254285                        // If we're scrolled into a section, stick the header
    255                         if ( $window.scrollTop() >= sectionStart && $window.scrollTop() < sectionEnd ) {
    256                             $header.addClass( 'header-fixed' );
    257                             $header.css( { top: offset + 'px', width: width + 'px' } );
     286                        if ( scrollPos >= sectionStart && scrollPos < sectionEnd - height ) {
     287                            $header.css( {
     288                                position: 'fixed',
     289                                top: offset + 'px',
     290                                bottom: 'auto',
     291                                width: width + 'px'
     292                            } );
     293                        // If we're at the end of the section, stick the header to the bottom
     294                        } else if ( scrollPos >= sectionEnd - height && scrollPos < sectionEnd ) {
     295                            $header.css( {
     296                                position: 'absolute',
     297                                top: 'auto',
     298                                bottom: 0,
     299                                width: width + 'px'
     300                            } );
     301                        // Unstick the header
    258302                        } else {
    259                             $header.removeClass( 'header-fixed' );
    260                             $header.css( { top: 0, width: 'auto' } );
     303                            $header.css( {
     304                                position: 'static',
     305                                top: 'auto',
     306                                bottom: 'auto',
     307                                width: 'auto'
     308                            } );
    261309                        }
    262310                    } );
    263311                }, 100 );
     312
    264313                function enableFixedHeaders() {
    265314                    if ( $window.width() > 782 ) {
    266                         adjustScrollClass();
    267                         $window.on( 'scroll', adjustScrollClass );
     315                        setup();
     316                        adjustScrollPosition();
     317                        $window.on( 'scroll', adjustScrollPosition );
    268318                    } else {
    269                         $window.off( 'scroll', adjustScrollClass );
     319                        $window.off( 'scroll', adjustScrollPosition );
     320                        $sections.find( '.section-header' )
     321                            .css( {
     322                                width: 'auto'
     323                            } );
    270324                        $sections.find( 'h2' )
    271                             .removeClass( 'header-fixed' )
    272                             .css( { top: 0, width: 'auto' } );
     325                            .css( {
     326                                position: 'static',
     327                                top: 'auto',
     328                                bottom: 'auto',
     329                                width: 'auto'
     330                            } );
    273331                    }
    274332                }
Note: See TracChangeset for help on using the changeset viewer.