أعجبني هذا الفكرة جدًا 
لذا جربتها قليلًا للتو. أعتقد أن هناك طريقة أفضل بكثير لتنفيذها، لكن حاليًا تعمل بشكل جيد جدًا على موقعي. 
أستخدم كود القالب الخاص بمكون الرأس الكبير - الرأس الصغير في قسم </head> لتحقيق ذلك.
لسوء الحظ، توجد قيود على iPhone لأن شريط التنقل السفلي (footer-nav) يحجب شريط علامات التبويب الخاص بـ 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;
}
معاينة