Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-12-23 09:37:42 +01:00
Code Issues Projects Releases Wiki Activity

Themes: Improve Twenty Fifteen sticky sidebar logic

Browse Source 
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


Built from https://develop.svn.wordpress.org/trunk@46308


git-svn-id: http://core.svn.wordpress.org/trunk@46107 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
whyisjake 2019-09-25 21:38:58 +00:00
parent 285ae90032
commit 0acc444279
2 changed files with 21 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
wp-content/themes/twentyfifteen/js/functions.js
View File

@ -6,10 +6,8 @@
*/ */
( function( $ ) { ( function( $ ) {
var $body, $window, $sidebar, adminbarOffset, top = false, var $body, $window, $sidebar, resizeTimer,
bottom = false, windowWidth, windowHeight, lastWindowPos = 0, secondary, button;
topOffset = 0, bodyHeight, sidebarHeight, resizeTimer,
secondary, button;
function initMainNavigation( container ) { function initMainNavigation( container ) {
// Add dropdown toggle that display child menu items. // Add dropdown toggle that display child menu items.
@ -96,71 +94,32 @@
} }
// Sidebar scrolling. // 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() { function resizeAndScroll() {
resize(); var windowPos = $window.scrollTop(),
scroll(); 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() { $( document ).ready( function() {
$body = $( document.body ); $body = $( document.body );
$window = $( window ); $window = $( window );
$sidebar = $( '#sidebar' ).first(); $sidebar = $( '#sidebar' ).first();
adminbarOffset = $body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
$window $window
.on( 'scroll.twentyfifteen', scroll ) .on( 'scroll.twentyfifteen', resizeAndScroll )
.on( 'load.twentyfifteen', onResizeARIA ) .on( 'load.twentyfifteen', onResizeARIA )
.on( 'resize.twentyfifteen', function() { .on( 'resize.twentyfifteen', function() {
clearTimeout( resizeTimer ); clearTimeout( resizeTimer );
@ -169,9 +128,7 @@
} ); } );
$sidebar.on( 'click.twentyfifteen keydown.twentyfifteen', 'button', resizeAndScroll ); $sidebar.on( 'click.twentyfifteen keydown.twentyfifteen', 'button', resizeAndScroll );
resizeAndScroll(); for ( var i = 0; i < 6; i++ ) {
for ( var i = 1; i < 6; i++ ) {
setTimeout( resizeAndScroll, 100 * i ); setTimeout( resizeAndScroll, 100 * i );
} }
} ); } );

2
wp-includes/version.php
View File

@ -13,7 +13,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.3-beta1-46294'; $wp_version = '5.3-beta1-46308';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.