From be9b6c7290dddcd8b8b6a8926bd101b7123528b3 Mon Sep 17 00:00:00 2001 From: Frans de Jonge Date: Wed, 4 Dec 2024 22:30:04 +0100 Subject: 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 --------- Co-authored-by: Alexandre Alapetite --- p/scripts/main.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) (limited to 'p/scripts/main.js') 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); -- cgit v1.2.3