diff --git a/src/wp-content/themes/twentyfifteen/js/functions.js b/src/wp-content/themes/twentyfifteen/js/functions.js index f74718c075..4c9f1b33c8 100644 --- a/src/wp-content/themes/twentyfifteen/js/functions.js +++ b/src/wp-content/themes/twentyfifteen/js/functions.js @@ -6,6 +6,8 @@ */ ( function( $ ) { + var $body, $window, sidebar, toolbarOffset; + $( 'html' ).removeClass( 'no-js' ); // Add dropdown toggle that display child menu items. @@ -47,4 +49,37 @@ $( this ).toggleClass( 'toggled-on' ); } ); } )(); + + + // Sidebar (un)fixing: fix when short, un-fix when scroll needed + $body = $( 'body' ); + $window = $( window ); + sidebar = $( '#sidebar' )[0]; + toolbarOffset = $body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0; + + function fixedOrScrolledSidebar() { + if ( $window.width() >= 955 ) { + if ( sidebar.scrollHeight < ( $window.height() - toolbarOffset ) ) { + $body.addClass( 'sidebar-fixed' ); + } else { + $body.removeClass( 'sidebar-fixed' ); + } + } else { + $body.removeClass( 'sidebar-fixed' ); + } + } + + function debouncedFixedOrScrolledSidebar() { + var timeout; + return function() { + clearTimeout( timeout ); + timeout = setTimeout( function() { + timeout = null; + fixedOrScrolledSidebar(); + }, 150 ); + }; + } + + $window.on( 'load.twentyfifteen', fixedOrScrolledSidebar ).on( 'resize.twentyfifteen', debouncedFixedOrScrolledSidebar() ); + } )( jQuery ); \ No newline at end of file diff --git a/src/wp-content/themes/twentyfifteen/style.css b/src/wp-content/themes/twentyfifteen/style.css index bf8ba7aee6..91b0716ad7 100644 --- a/src/wp-content/themes/twentyfifteen/style.css +++ b/src/wp-content/themes/twentyfifteen/style.css @@ -3803,13 +3803,17 @@ span > video { @media screen and (min-width: 59.6875em) { body:before, - .site-header, - .main-navigation, - .social-navigation, - .widget { + .sidebar-fixed .site-header, + .sidebar-fixed .main-navigation, + .sidebar-fixed .social-navigation, + .sidebar-fixed .widget { -webkit-transform: translateZ(0); /* Fixes flashing bug with scrolling on iOS Safari */ } + .sidebar-fixed .sidebar { + position: fixed; + } + body:before { background-color: #fff; box-shadow: 0 0 1px rgba(0, 0, 0, 0.15); @@ -3830,20 +3834,12 @@ span > video { .sidebar { float: left; - height: 100%; margin-right: -100%; max-width: 413px; - overflow-y: scroll; - -webkit-overflow-scrolling: touch; /* Enable momentum scrolling on iOS Safari */ - position: fixed; + position: relative; width: 29.4118%; } - .admin-bar .sidebar { - height: -webkit-calc(100% - 32px); - height: calc(100% - 32px); - } - .secondary { background-color: transparent; display: block;