refactor: change fixHeaderPadding to updatePanelOffset

Save css variable to html element instead of updating padding-top via js.
Fixes #538

less/style.less

@@ -18,6 +18,10 @@ body {
 	min-height: 100%;
 }
 
+#panel {
+	padding-top: var(--panel-offset);
+}
+
 @media (max-width: @screen-xs-max) {
 	.slideout-panel {
 		min-height: 100vh;

less/topic.less

@@ -41,7 +41,7 @@
 	}
 	.topic-header {
 		position: sticky;
-		top: @navbar-height;
+		top: calc(var(--panel-offset) + @navbar-height);
 		background-color: @body-bg;
 		z-index: @zindex-navbar;
 		margin-left: -15px;
@@ -50,6 +50,12 @@
 		padding-right: 15px;
 	}
 
+	@media (max-width: @screen-md-max) {
+		.topic-header {
+			top: calc(var(--panel-offset) + @navbar-height - 70px);
+		}
+	}
+
 	.topic-info {
 		border-bottom: 1px solid @post-border-color;
 		margin-bottom: 10px;

public/persona.js

@@ -7,10 +7,10 @@ $(document).ready(function () {
 	setupEditedByIcon();
 	setupQuickReply();
 	configureNavbarHiding();
-	fixHeaderPadding();
+	updatePanelOffset();
 
 	$(window).on('resize', utils.debounce(configureNavbarHiding, 200));
-	$(window).on('resize', fixHeaderPadding);
+	$(window).on('resize', updatePanelOffset);
 
 	$(window).on('action:app.loggedIn', function () {
 		setupMobileMenu();
@@ -21,25 +21,24 @@ $(document).ready(function () {
 		setupMobileMenu();
 	});
 
-	function fixHeaderPadding() {
+	function updatePanelOffset() {
 		var env = utils.findBootstrapEnvironment();
 		const headerEl = document.getElementById('header-menu');
-		const panelEl = document.getElementById('panel');
 
-		if (!headerEl || !panelEl) {
+		if (!headerEl) {
 			return;
 		}
 
 		const headerRect = headerEl.getBoundingClientRect();
 		const headerStyle = window.getComputedStyle(headerEl);
 
-		let paddingTop = headerRect.y + headerRect.height + (parseInt(headerStyle.marginTop, 10) || 0) + (parseInt(headerStyle.marginBottom, 10) || 0);
+		let offset = headerRect.y + headerRect.height + (parseInt(headerStyle.marginTop, 10) || 0) + (parseInt(headerStyle.marginBottom, 10) || 0);
 		// body element itself introduces a hardcoded 70px padding on desktop resolution
 		if (env === 'lg') {
-			paddingTop -= 70;
+			offset -= 70;
 		}
 
-		panelEl.style.paddingTop = `${paddingTop}px`;
+		document.documentElement.style.setProperty('--panel-offset', `${offset}px`);
 	}
 
 	var lastBSEnv = '';