我非常喜欢这个想法 
所以我稍微尝试了一下。我相信有更好的实现方式，但目前在我的网站上运行得相当不错。
我使用了 大标题 - 小标题 组件的 <head> 模板代码来实现这一功能。
不幸的是，在 iPhone 上存在限制，因为底部导航栏会完全遮挡 Discourse 的标签栏。所以我将其隐藏了。
我已更新了此代码！
现在我把代码分享在这里（不确定是否可以合并）：
将此代码放入移动端的 <head> 部分：
<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>
将此代码放入移动端的 CSS 部分：
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;
}
演示
