Implement showing and hiding header depending on scroll (#7029)

* Implement showing and hiding header depending on scroll

References #7011.

* header.phtml: adjust indentation

* minor efficiency improvement

* Update p/scripts/main.js

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

---------

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

3 files changed, 44 insertions, 0 deletions

diff --git a/p/scripts/main.js b/p/scripts/main.js
index f74e36553..4da89f228 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1954,6 +1954,23 @@ function init_confirm_action() {
 	document.querySelectorAll('button.confirm').forEach(function (b) { b.disabled = false; });
 }
 
+function init_scroll_header() {
+	const header = document.querySelector('header.header');
+	if (header) {
+		const headerHeight = parseInt(getComputedStyle(header).height);
+		header.previousScroll = 0;
+		window.addEventListener('scroll', function () {
+			const currentScroll = window.scrollY;
+			if (currentScroll > headerHeight && currentScroll > header.previousScroll) {
+				header.classList.add('hide');
+			} else {
+				header.classList.remove('hide');
+			}
+			header.previousScroll = currentScroll;
+		});
+	}
+}
+
 function faviconNbUnread(n) {
 	if (typeof n === 'undefined') {
 		const t = document.querySelector('.category.all .title');
@@ -2040,6 +2057,7 @@ function init_main_afterDOM() {
 	removeFirstLoadSpinner();
 	init_notifications();
 	init_confirm_action();
+	init_scroll_header();
 	const stream = document.getElementById('stream');
 	if (stream) {
 		init_load_more(stream);
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index b1825c96d..1412ac5f0 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1159,11 +1159,24 @@ li.drag-hover {
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
+.header-wrapper {
+	height: calc(2.5rem + 2 * var(--frss-padding-top-bottom));
+}
+
 .header {
+	position: fixed;
+	top: 0;
+	left: 0;
 	display: table;
 	width: 100%;
 	height: calc(2.5rem + 2 * var(--frss-padding-top-bottom));
 	table-layout: fixed;
+	transition: transform 0.3s;
+	z-index: 110;
+}
+
+.header.hide {
+	transform: translateY(calc(-2.5rem - 2 * var(--frss-padding-top-bottom)));
 }
 
 .header > .item {
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 460756cbc..b5234bc49 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1159,11 +1159,24 @@ li.drag-hover {
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
+.header-wrapper {
+	height: calc(2.5rem + 2 * var(--frss-padding-top-bottom));
+}
+
 .header {
+	position: fixed;
+	top: 0;
+	right: 0;
 	display: table;
 	width: 100%;
 	height: calc(2.5rem + 2 * var(--frss-padding-top-bottom));
 	table-layout: fixed;
+	transition: transform 0.3s;
+	z-index: 110;
+}
+
+.header.hide {
+	transform: translateY(calc(-2.5rem - 2 * var(--frss-padding-top-bottom)));
 }
 
 .header > .item {