WordPress.org

Make WordPress Core

Ticket #29979: 29979.7.diff

File 29979.7.diff, 2.7 KB (added by iamtakashi, 6 years ago)

Fixiing the sidebar first and make it scroll if it's taller than the document. Props @mattwiebe

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

     
    66 */
    77
    88( function( $ ) {
     9        var $body, $window, sidebar, toolbarOffset;
     10
    911        $( 'html' ).removeClass( 'no-js' );
    1012
    1113        // Add dropdown toggle that display child menu items.
     
    4749                        $( this ).toggleClass( 'toggled-on' );
    4850                } );
    4951        } )();
     52
     53
     54        // Sidebar (un)fixing: fix when short, un-fix when scroll needed
     55        $body         = $( 'body' );
     56        $window       = $( window );
     57        sidebar       = $( '#sidebar' )[0];
     58        toolbarOffset = $body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
     59
     60        function fixedOrScrolledSidebar() {
     61                if ( $window.width() >= 955 ) {
     62                        if ( sidebar.scrollHeight < ( $window.height() - toolbarOffset ) ) {
     63                                $body.addClass( 'sidebar-fixed' );
     64                        } else {
     65                                $body.removeClass( 'sidebar-fixed' );
     66                        }
     67                } else {
     68                        $body.removeClass( 'sidebar-fixed' );
     69                }
     70        }
     71
     72        function debouncedFixedOrScrolledSidebar() {
     73                var timeout;
     74                return function() {
     75                        clearTimeout( timeout );
     76                        timeout = setTimeout( function() {
     77                                timeout = null;
     78                                fixedOrScrolledSidebar();
     79                        }, 150 );
     80                };
     81        }
     82
     83        $window.on( 'load.twentyfifteen', fixedOrScrolledSidebar ).on( 'resize.twentyfifteen', debouncedFixedOrScrolledSidebar() );
     84
    5085} )( jQuery );
     86 No newline at end of file
  • wp-content/themes/twentyfifteen/style.css

     
    37993799
    38003800@media screen and (min-width: 59.6875em) {
    38013801        body:before,
    3802         .site-header,
    3803         .main-navigation,
    3804         .social-navigation,
    3805         .widget {
     3802        .sidebar-fixed .site-header,
     3803        .sidebar-fixed .main-navigation,
     3804        .sidebar-fixed .social-navigation,
     3805        .sidebar-fixed .widget {
    38063806                -webkit-transform: translateZ(0); /* Fixes flashing bug with scrolling on iOS Safari */
    38073807        }
    38083808
     3809        .sidebar-fixed .sidebar {
     3810                position: fixed;
     3811        }
     3812
    38093813        body:before {
    38103814                background-color: #fff;
    38113815                box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
     
    38263830
    38273831        .sidebar {
    38283832                float: left;
    3829                 height: 100%;
    38303833                margin-right: -100%;
    38313834                max-width: 413px;
    3832                 overflow-y: scroll;
    3833                 -webkit-overflow-scrolling: touch; /* Enable momentum scrolling on iOS Safari */
    3834                 position: fixed;
     3835                position: relative;
    38353836                width: 29.4118%;
    38363837        }
    38373838
    3838         .admin-bar .sidebar {
    3839                 height: -webkit-calc(100% - 32px);
    3840                 height: calc(100% - 32px);
    3841         }
    3842 
    38433839        .secondary {
    38443840                background-color: transparent;
    38453841                display: block;