WordPress.org

Make WordPress Core

Changeset 46308


Ignore:
Timestamp:
09/25/2019 09:37:09 PM (4 weeks ago)
Author:
whyisjake
Message:

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

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyfifteen/js/functions.js

    r42411 r46308  
    77
    88( function( $ ) {
    9     var $body, $window, $sidebar, adminbarOffset, top = false,
    10         bottom = false, windowWidth, windowHeight, lastWindowPos = 0,
    11         topOffset = 0, bodyHeight, sidebarHeight, resizeTimer,
    12         secondary, button;
     9    var $body, $window, $sidebar, resizeTimer,
     10        secondary, button;
    1311
    1412    function initMainNavigation( container ) {
     
    9795
    9896    // Sidebar scrolling.
    99     function resize() {
    100         windowWidth = $window.width();
     97    function resizeAndScroll() {
     98        var windowPos = $window.scrollTop(),
     99            windowHeight = $window.height(),
     100            sidebarHeight = $sidebar.height(),
     101            bodyHeight = $body.height();
    101102
    102         if ( 955 > windowWidth ) {
    103             top = bottom = false;
    104             $sidebar.removeAttr( 'style' );
     103        if( 955 < $window.width()
     104            && bodyHeight > sidebarHeight
     105            && ( windowPos + windowHeight ) >= sidebarHeight ) {
     106
     107            $sidebar.css({
     108                position: "fixed",
     109                bottom: sidebarHeight > windowHeight ? 0 : 'auto'
     110            });
     111        } else {
     112            $sidebar.css('position', 'relative')
    105113        }
    106     }
    107 
    108     function scroll() {
    109         var windowPos = $window.scrollTop();
    110 
    111         if ( 955 > windowWidth ) {
    112             return;
    113         }
    114 
    115         sidebarHeight = $sidebar.height();
    116         windowHeight  = $window.height();
    117         bodyHeight    = $body.height();
    118 
    119         if ( sidebarHeight + adminbarOffset > windowHeight ) {
    120             if ( windowPos > lastWindowPos ) {
    121                 if ( top ) {
    122                     top = false;
    123                     topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
    124                     $sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
    125                 } else if ( ! bottom && windowPos + windowHeight > sidebarHeight + $sidebar.offset().top && sidebarHeight + adminbarOffset < bodyHeight ) {
    126                     bottom = true;
    127                     $sidebar.attr( 'style', 'position: fixed; bottom: 0;' );
    128                 }
    129             } else if ( windowPos < lastWindowPos ) {
    130                 if ( bottom ) {
    131                     bottom = false;
    132                     topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
    133                     $sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
    134                 } else if ( ! top && windowPos + adminbarOffset < $sidebar.offset().top ) {
    135                     top = true;
    136                     $sidebar.attr( 'style', 'position: fixed;' );
    137                 }
    138             } else {
    139                 top = bottom = false;
    140                 topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
    141                 $sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
    142             }
    143         } else if ( ! top ) {
    144             top = true;
    145             $sidebar.attr( 'style', 'position: fixed;' );
    146         }
    147 
    148         lastWindowPos = windowPos;
    149     }
    150 
    151     function resizeAndScroll() {
    152         resize();
    153         scroll();
    154114    }
    155115
     
    158118        $window        = $( window );
    159119        $sidebar       = $( '#sidebar' ).first();
    160         adminbarOffset = $body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
    161120
    162121        $window
    163             .on( 'scroll.twentyfifteen', scroll )
     122            .on( 'scroll.twentyfifteen', resizeAndScroll )
    164123            .on( 'load.twentyfifteen', onResizeARIA )
    165124            .on( 'resize.twentyfifteen', function() {
     
    170129        $sidebar.on( 'click.twentyfifteen keydown.twentyfifteen', 'button', resizeAndScroll );
    171130
    172         resizeAndScroll();
    173 
    174         for ( var i = 1; i < 6; i++ ) {
     131        for ( var i = 0; i < 6; i++ ) {
    175132            setTimeout( resizeAndScroll, 100 * i );
    176133        }
  • trunk/tests/qunit/fixtures/wp-api-generated.js

    r46252 r46308  
    74357435        "queryable": false,
    74367436        "slug": "pending",
    7437         "date_floating": false,
     7437        "date_floating": true,
    74387438        "_links": {
    74397439            "archives": [
Note: See TracChangeset for help on using the changeset viewer.