From c429ba1bddf7a13891cf21e8a8f34f3c005de07f Mon Sep 17 00:00:00 2001 From: Ian Stewart Date: Sun, 26 Oct 2014 15:03:45 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@30025 602fd350-edb4-49c9-b593-d223f7449a82 --- .../themes/twentyfifteen/js/functions.js | 35 +++++++++++++++++++ src/wp-content/themes/twentyfifteen/style.css | 22 +++++------- 2 files changed, 44 insertions(+), 13 deletions(-) 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;