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>

1 files changed, 18 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);