基于Bulma框架的WordPress主题：顶部Banner置于Navbar上方问题

你遇到的核心问题是Bulma的is-fixed-top类会让Navbar采用固定定位（position: fixed），这种定位会让元素脱离正常文档流，默认就会覆盖在其他元素上方。加上你的JavaScript代码存在几个小问题，导致没能正确调整Navbar的位置。我来一步步帮你修复：

问题分析 #

1. is-fixed-top的固定定位特性：固定定位的元素默认会置于视口顶部，和文档流里的Banner不产生位置关联
2. JavaScript的错误：
   • 你用了height()方法，这是jQuery的语法，但看起来你没引入jQuery，原生JS应该用offsetHeight
   • style.top里写!important是无效的，内联样式本身优先级就很高，不需要加这个
   • 代码只执行了一次，没有监听页面滚动事件，滚动时不会触发位置调整
3. 缺少页面内容的偏移：固定Navbar会遮挡页面顶部内容，需要给body或主容器加padding-top

修复方案 #

1. 修正JavaScript代码（原生JS，无需jQuery） #

替换你的foo.js内容为：

// 等待DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
  const banner = document.getElementById('banner');
  const navbar = document.getElementById('topnavbar');
  // 获取Banner的实际高度（包括padding、border）
  const bannerHeight = banner.offsetHeight;
  // 获取Navbar的高度，用于设置body的padding
  const navbarHeight = navbar.offsetHeight;

  // 初始设置Navbar的top值
  navbar.style.top = `${bannerHeight}px`;
  // 给body加padding，防止内容被固定Navbar遮挡
  document.body.style.paddingTop = `${navbarHeight}px`;

  // 监听滚动事件
  window.addEventListener('scroll', function() {
    // 当滚动距离超过Banner高度时，Navbar贴顶；否则回到Banner下方
    if (window.scrollY >= bannerHeight) {
      navbar.style.top = '0';
      // 滚动后Navbar贴顶时，可以给它加个阴影增强视觉效果（可选）
      navbar.classList.add('shadow');
    } else {
      navbar.style.top = `${bannerHeight}px`;
      navbar.classList.remove('shadow');
    }
  });
});

2. 调整CSS补充样式 #

在style.css里添加：

/* 可选：给滚动贴顶的Navbar加阴影，提升层次感 */
#topnavbar.shadow {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 确保Banner不会被Navbar遮挡，初始状态下Navbar在它下方 */
#banner {
  margin-bottom: 0;
}

3. 修正HTML里的拼写错误 #

你在非首页的Navbar项里有个拼写错误：herf应该改成href：

<a class="navbar-item" herf="<?php echo get_home_url();?>#6">6</a>
<!-- 改成 -->
<a class="navbar-item" href="<?php echo get_home_url();?>#6">6</a>

为什么这样有效？ #

• 初始时通过offsetHeight获取Banner的真实高度，设置Navbar的top值让它刚好在Banner下方
• 监听滚动事件，当页面滚动超过Banner高度时，把Navbar的top设为0，让它固定在视口顶部
• 给body设置padding-top等于Navbar的高度，避免页面内容被固定的Navbar遮挡
• 用原生JS实现，不需要依赖jQuery，更轻量

这样调整后，你的Banner就会正常显示在Navbar上方，滚动页面时Navbar会平滑切换到顶部固定状态~

内容的提问来源于stack exchange，提问作者etucker