Ich finde diese Idee wirklich toll 
Ich habe gerade ein wenig damit experimentiert. Ich bin überzeugt, dass es einen deutlich besseren Weg gibt, dies umzusetzen, aber momentan funktioniert es auf meiner Seite ziemlich gut. 
Ich verwende dafür den Code des Big Header - Little Header-Komponenten für den <head>-Bereich der Vorlage.
Leider gibt es auf dem iPhone eine Einschränkung, da die Footer-Navigation die Discourse-Tab-Leiste vollständig verdeckt. Deshalb habe ich diese ausgeblendet.
Ich habe diesen Code aktualisiert!
Jetzt teile ich den Code hier (ich bin mir nicht sicher, ob er zusammengeführt werden kann):
Fügen Sie dies im mobilen <head>-Bereich ein:
<script type="text/discourse-plugin" version="0.8.18">
$(document).ready(function() {
var lastScrollTop = 0;
var body = $("body");
var scrollMax = 30;
$(window).scroll(function() {
var scroll = $(this).scrollTop();
if (lastScrollTop < scroll && scroll > scrollMax && !body.hasClass("tab-bar-hidden")) {
body.addClass("tab-bar-hidden");
} else if (lastScrollTop > scroll && body.hasClass("tab-bar-hidden")) {
body.removeClass("tab-bar-hidden");
}
lastScrollTop = scroll;
});
});
</script>
Fügen Sie dies im mobilen CSS-Bereich ein:
html:not(.anon) {
#topic-progress-wrapper,
#reply-control.draft {
bottom: 49px;
}
#reply-control.draft {
margin-bottom: env(safe-area-inset-bottom);
padding-bottom: 0px;
transition: all .1s ease-out;
}
.posts-filtered-notice {
transition: all .1s ease-out;
bottom: 49px;
}
}
body.tab-bar-hidden {
.d-tab-bar {
bottom: -49px;
transition: all .2s ease-in;
}
#topic-progress-wrapper:not(.docked),
#reply-control.draft {
bottom: 0;
transition: all .2s ease-in;
}
#reply-control.draft {
margin-bottom: env(safe-area-inset-bottom);
padding-bottom: 0px;
transition: all .2s ease-in;
}
.posts-filtered-notice {
transition: all .2s ease-in;
bottom: 0;
}
}
.d-tab-bar {
transition: all .1s ease-out;
}
body:not(.footer-nav-ipad) .footer-nav {
display: none;
}
Demo