修复手机端tab栏吸顶时被header遮挡一半的问题:动态计算header高度
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -62,7 +62,7 @@ body {
|
||||
|
||||
/* ===== Nav tabs ===== */
|
||||
.nav-wrap {
|
||||
position: sticky; top: 52px; z-index: 90;
|
||||
position: sticky; top: var(--header-h, 64px); z-index: 90;
|
||||
background: rgba(255,255,255,0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 0.5px solid rgba(0,0,0,0.06);
|
||||
}
|
||||
@@ -1302,6 +1302,14 @@ function toggleCard(head) {
|
||||
card.classList.toggle('open');
|
||||
}
|
||||
|
||||
// Fix nav-wrap top to match actual header height
|
||||
function syncNavTop() {
|
||||
var h = document.querySelector('.header').offsetHeight;
|
||||
document.documentElement.style.setProperty('--header-h', h + 'px');
|
||||
}
|
||||
syncNavTop();
|
||||
window.addEventListener('resize', syncNavTop);
|
||||
|
||||
// Expand/collapse all
|
||||
function toggleAll(btn) {
|
||||
var section = btn.parentElement;
|
||||
|
||||
Reference in New Issue
Block a user