이 아이디어가 정말 마음에 들어요
그래서 조금 테스트해 봤습니다. 훨씬 더 나은 방법이 있다고 생각하지만, 지금은 제 사이트에서 꽤 잘 작동합니다. ![]()
이를 위해 Big Header - Little Header 컴포넌트의 </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;
}
데모