Restrict sticky heaader visibility

- Hide if javascript disabled.
- Hide at lower resolutions.

Bug: T289714
Change-Id: I0c669c7fc46fda7bf5055d20cc1cd54d472a9330

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 );
+	} );
+}

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;
+}