WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Twenty Fifteen: Making the sidebar sticky for everyone. When we have a long sidebar, let it scroll with the content, but fixing the sidebar and no longer scrolling when we get to the end of the sidebar content. Scroll up and the sidebar starts scrolling up to, eventually staying fixed when it gets back to the top. 

Props celloexpressions, avryl, fixes #30366.



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


git-svn-id: http://core.svn.wordpress.org/trunk@30385 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Ian Stewart 2014-11-19 18:23:21 +00:00
parent d2b903f896
commit 5c6de0c973
1 changed files with 69 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,9 @@
*/ */
( function( $ ) { ( function( $ ) {
var $body, $window, sidebar, toolbarOffset; var $body, $window, $document, $sidebar, adminbarOffset, top = false,
bottom = false, windowWidth, windowHeight, lastWindowPos = 0,
topOffset = 0, documentHeight, sidebarWidth, sidebarHeight, resizeTimer;
// Add dropdown toggle that display child menu items. // Add dropdown toggle that display child menu items.
$( '.main-navigation .page_item_has_children > a, .main-navigation .menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' ); $( '.main-navigation .page_item_has_children > a, .main-navigation .menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
@ -32,7 +34,7 @@
return; return;
} }
// Hide button if there is no widgets and menu is missing or empty. // Hide button if there are no widgets and the menus are missing or empty.
menu = secondary.find( '.nav-menu' ); menu = secondary.find( '.nav-menu' );
widgets = secondary.find( '#widget-area' ); widgets = secondary.find( '#widget-area' );
social = secondary.find( '#social-navigation' ); social = secondary.find( '#social-navigation' );
@ -48,47 +50,81 @@
} ); } );
} )(); } )();
// Sidebar scrolling.
function resize() {
windowWidth = $window.width();
windowHeight = $window.height();
documentHeight = $document.height();
sidebarHeight = $sidebar.height();
// Sidebar (un)fixing: fix when short, un-fix when scroll needed if ( 955 >= windowWidth ) {
function fixedOrScrolledSidebar() { top = bottom = false;
if ( $window.width() >= 955 ) { $sidebar.removeAttr( 'style' );
if ( sidebar.scrollHeight < ( $window.height() - toolbarOffset ) ) { }
$body.addClass( 'sidebar-fixed' ); }
} else {
$body.removeClass( 'sidebar-fixed' ); function scroll() {
var windowPos = $window.scrollTop();
if ( 955 <= windowWidth && sidebarHeight + adminbarOffset < documentHeight ) {
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 ) {
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 { } else {
$body.removeClass( 'sidebar-fixed' ); 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;' );
} }
} }
function debouncedFixedOrScrolledSidebar() { lastWindowPos = windowPos;
var timeout;
return function() {
clearTimeout( timeout );
timeout = setTimeout( function() {
timeout = null;
fixedOrScrolledSidebar();
}, 150 );
};
} }
function resizeAndScroll() {
resize();
scroll();
}
$( document ).ready( function() { $( document ).ready( function() {
// But! We only want to allow fixed sidebars when there are no submenus.
if ( $( '#site-navigation .sub-menu' ).length ) {
return;
}
// only initialize 'em if we need 'em
$body = $( 'body' ); $body = $( 'body' );
$window = $( window ); $window = $( window );
sidebar = $( '#sidebar' )[0]; $document = $( document );
toolbarOffset = $body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0; $sidebar = $( '#sidebar' ).first();
adminbarOffset = $body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
$window $window
.on( 'load.twentyfifteen', fixedOrScrolledSidebar ) .on( 'scroll.twentyfifteen', scroll )
.on( 'resize.twentyfifteen', debouncedFixedOrScrolledSidebar() ); .on( 'resize.twentyfifteen', function() {
clearTimeout( resizeTimer );
resizeTimer = setTimeout( resizeAndScroll, 500 );
} );
$sidebar.on( 'click keydown', 'button', resizeAndScroll );
resizeAndScroll();
for ( var i = 1; i < 6; i++ ) {
setTimeout( resizeAndScroll, 100 * i );
}
} ); } );
} )( jQuery ); } )( jQuery );