diff --git a/resources/skins.vector.js/skin.js b/resources/skins.vector.js/skin.js index 547cdfb48..27592db38 100644 --- a/resources/skins.vector.js/skin.js +++ b/resources/skins.vector.js/skin.js @@ -44,6 +44,22 @@ function enableCssAnimations( document ) { * @return {void} */ function main( window ) { + enableCssAnimations( window.document ); + collapsibleTabs.init(); + sidebar.init( window ); + dropdownMenus(); + vector.init(); + initSearchLoader( document ); + searchToggle(); + languageButton(); + stickyHeader(); +} + +/** + * @param {Window} window + * @return {void} + */ +function init( window ) { var now = mw.now(); // This is the earliest time we can run JS for users (and bucket anonymous // users for A/B tests). @@ -65,15 +81,15 @@ function main( window ) { mw.track( 'timing.Vector.ready', now - window.performance.timing.navigationStart ); // milliseconds } } ); - enableCssAnimations( window.document ); - collapsibleTabs.init(); - sidebar.init( window ); - dropdownMenus(); - $( vector.init ); - initSearchLoader( document ); - searchToggle(); - languageButton(); - stickyHeader(); } -main( window ); +init( window ); + +if ( document.readyState === 'interactive' || document.readyState === 'complete' ) { + main( window ); +} else { + // This is needed when document.readyState === 'loading'. + document.addEventListener( 'DOMContentLoaded', function () { + main( window ); + } ); +} diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less index b218f7381..d7a81ac1d 100644 --- a/resources/skins.vector.styles/components/StickyHeader.less +++ b/resources/skins.vector.styles/components/StickyHeader.less @@ -26,6 +26,11 @@ padding: 6px 25px; } + // T289714 Hide the sticky header at lower resolutions. + @media ( max-width: @width-breakpoint-tablet ) { + display: none; + } + &-visible { transform: translateY( 0% ); } @@ -71,3 +76,7 @@ } } } + +.client-nojs .vector-sticky-header { + display: none; +}