Mi piace molto questa idea 
Quindi ho appena provato a implementarla un po’. Credo che ci sia un modo molto migliore per farlo, ma per ora funziona abbastanza bene sul mio sito. 
Utilizzo il componente Big Header - Little Header inserendo il codice nel tag <head> del template per ottenere questo risultato.
Purtroppo su iPhone c’è una limitazione perché la barra di navigazione in basso (footer-nav) copre completamente la barra delle schede di Discourse. Quindi l’ho nascosta.
Ho aggiornato questo codice!
Ora condivido il codice qui (non sono sicuro che sia pronto per essere unito al progetto):
Inserisci questo nella sezione <head> per dispositivi mobili:
<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>
Inserisci questo nella sezione CSS per dispositivi mobili:
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