Skip to content
Permalink
Browse files

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



git-svn-id: https://develop.svn.wordpress.org/trunk@46308 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information...
whyisjake committed Sep 25, 2019
1 parent 2d4521d commit 6649b3638c19eb0cf8dc86432bf256905b647419
Showing with 21 additions and 64 deletions.
  1. +20 −63 src/wp-content/themes/twentyfifteen/js/functions.js
  2. +1 −1 tests/qunit/fixtures/wp-api-generated.js
@@ -6,10 +6,8 @@
*/

( function( $ ) {
var $body, $window, $sidebar, adminbarOffset, top = false,
bottom = false, windowWidth, windowHeight, lastWindowPos = 0,
topOffset = 0, bodyHeight, sidebarHeight, resizeTimer,
secondary, button;
var $body, $window, $sidebar, resizeTimer,
secondary, button;

function initMainNavigation( container ) {
// Add dropdown toggle that display child menu items.
@@ -96,71 +94,32 @@
}

// Sidebar scrolling.
function resize() {
windowWidth = $window.width();

if ( 955 > windowWidth ) {
top = bottom = false;
$sidebar.removeAttr( 'style' );
}
}

function scroll() {
var windowPos = $window.scrollTop();

if ( 955 > windowWidth ) {
return;
}

sidebarHeight = $sidebar.height();
windowHeight = $window.height();
bodyHeight = $body.height();

if ( sidebarHeight + adminbarOffset > windowHeight ) {
if ( windowPos > lastWindowPos ) {
if ( top ) {
top = false;
topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
$sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
} else if ( ! bottom && windowPos + windowHeight > sidebarHeight + $sidebar.offset().top && sidebarHeight + adminbarOffset < bodyHeight ) {
bottom = true;
$sidebar.attr( 'style', 'position: fixed; bottom: 0;' );
}
} else if ( windowPos < lastWindowPos ) {
if ( bottom ) {
bottom = false;
topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
$sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
} else if ( ! top && windowPos + adminbarOffset < $sidebar.offset().top ) {
top = true;
$sidebar.attr( 'style', 'position: fixed;' );
}
} else {
top = bottom = false;
topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
$sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
}
} else if ( ! top ) {
top = true;
$sidebar.attr( 'style', 'position: fixed;' );
}

lastWindowPos = windowPos;
}

function resizeAndScroll() {
resize();
scroll();
var windowPos = $window.scrollTop(),
windowHeight = $window.height(),
sidebarHeight = $sidebar.height(),
bodyHeight = $body.height();

if( 955 < $window.width()
&& bodyHeight > sidebarHeight
&& ( windowPos + windowHeight ) >= sidebarHeight ) {

$sidebar.css({
position: "fixed",
bottom: sidebarHeight > windowHeight ? 0 : 'auto'
});
} else {
$sidebar.css('position', 'relative')
}
}

$( document ).ready( function() {
$body = $( document.body );
$window = $( window );
$sidebar = $( '#sidebar' ).first();
adminbarOffset = $body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;

$window
.on( 'scroll.twentyfifteen', scroll )
.on( 'scroll.twentyfifteen', resizeAndScroll )
.on( 'load.twentyfifteen', onResizeARIA )
.on( 'resize.twentyfifteen', function() {
clearTimeout( resizeTimer );
@@ -169,9 +128,7 @@
} );
$sidebar.on( 'click.twentyfifteen keydown.twentyfifteen', 'button', resizeAndScroll );

resizeAndScroll();

for ( var i = 1; i < 6; i++ ) {
for ( var i = 0; i < 6; i++ ) {
setTimeout( resizeAndScroll, 100 * i );
}
} );
@@ -7434,7 +7434,7 @@ mockedApiResponse.StatusesCollection = {
"public": false,
"queryable": false,
"slug": "pending",
"date_floating": false,
"date_floating": true,
"_links": {
"archives": [
{

0 comments on commit 6649b36

Please sign in to comment.
You can’t perform that action at this time.