WordPress.org

Make WordPress Core

Changeset 30025


Ignore:
Timestamp:
10/26/2014 03:03:45 PM (6 years ago)
Author:
iandstewart
Message:

Twenty Fifteen: If the sidebar is taller than the viewport scroll it with the content, if it's shorter keep it fixed.

Props mattwiebe, iamtakashi, avryl, fixes #29979.

Location:
trunk/src/wp-content/themes/twentyfifteen
Files:
2 edited

Legend:

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

    r30013 r30025  
    77
    88( function( $ ) {
     9    var $body, $window, sidebar, toolbarOffset;
     10
    911    $( 'html' ).removeClass( 'no-js' );
    1012
     
    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 );
  • trunk/src/wp-content/themes/twentyfifteen/style.css

    r30023 r30025  
    38043804@media screen and (min-width: 59.6875em) {
    38053805    body:before,
    3806     .site-header,
    3807     .main-navigation,
    3808     .social-navigation,
    3809     .widget {
     3806    .sidebar-fixed .site-header,
     3807    .sidebar-fixed .main-navigation,
     3808    .sidebar-fixed .social-navigation,
     3809    .sidebar-fixed .widget {
    38103810        -webkit-transform: translateZ(0); /* Fixes flashing bug with scrolling on iOS Safari */
     3811    }
     3812
     3813    .sidebar-fixed .sidebar {
     3814        position: fixed;
    38113815    }
    38123816
     
    38313835    .sidebar {
    38323836        float: left;
    3833         height: 100%;
    38343837        margin-right: -100%;
    38353838        max-width: 413px;
    3836         overflow-y: scroll;
    3837         -webkit-overflow-scrolling: touch; /* Enable momentum scrolling on iOS Safari */
    3838         position: fixed;
     3839        position: relative;
    38393840        width: 29.4118%;
    3840     }
    3841 
    3842     .admin-bar .sidebar {
    3843         height: -webkit-calc(100% - 32px);
    3844         height: calc(100% - 32px);
    38453841    }
    38463842
Note: See TracChangeset for help on using the changeset viewer.