MediaWiki:Gadget-StickyMwPanelAd.js

Note: After saving, you have to bypass your browser's cache to see the changes. Internet Explorer: hold down Ctrl and click the Refresh or Reload button. Firefox: hold down ⇧ Shift while clicking Reload (or press Ctrl+⇧ Shift+R). Google Chrome and Safari users can just click the Reload button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/**
 * To make the MW Panel ad sticky. Using CSS only won't work without
 * a major rearrangement of the elements due to the page layout.
 */
(function _gadgetStickyMwPanelAd() {
	"use strict";

	var LAST_LOG = '22:00, 25 June 2023 (UTC)';

	var mwPanelAdContainerId = '#mw-panel__ad-container';

	var topOffset = 5;

	var mwPanelHeightAboveAds =
		$('#p-logo').outerHeight(true) +
		$('.portal')
			.toArray()
			.reduce(function (acc, el) {
				return acc + $(el).outerHeight(true);
			}, 0);

	var heightToStickMwPanelAds = mwPanelHeightAboveAds - topOffset;

	var $mwPanelAdsContainer = $(mwPanelAdContainerId).css({ top: topOffset + 'px' });

	var $window = $(window);

	$window.on('scroll', function (e) {
		var isPositionFixed = $mwPanelAdsContainer.css('position') === 'fixed';

		var windowScrollTop = $window.scrollTop();

		if (windowScrollTop > heightToStickMwPanelAds && !isPositionFixed) {
			$mwPanelAdsContainer.css({ position: 'fixed' });
		}

		if (windowScrollTop < heightToStickMwPanelAds && isPositionFixed) {
			$mwPanelAdsContainer.css({ position: 'static' });
		}
	});

	console.log('[Gadget] StickyMwPanelAd last updated at', LAST_LOG);
})();