WordPress切换页面时导航栏随刷新变动，如何固定其位置保持不变？

方案1：AJAX局部加载页面内容（最贴合需求的方案） #

核心逻辑是完全不重载导航栏等公共区域，仅更新页面主体内容，从根源避免导航位置变动、加载闪烁的问题：

• 实现步骤：
  1. 给当前主题导航栏的所有内部跳转链接添加统一标识，比如给<a>标签加class="ajax-link"
  2. 在主题的functions.php中注册AJAX加载接口，用于返回指定页面的主体内容
  3. 绑定全局JS事件：监听所有.ajax-link的点击动作，阻止默认跳转行为，用fetch请求目标页面的内容
  4. 请求完成后仅替换页面#main-content（需替换为自己主题的主体内容容器ID）的内容，同时用history.pushState修改浏览器地址栏，保证前进后退功能正常
  5. 可按需添加淡入淡出过渡效果，优化加载体验
• 参考JS代码片段：

document.addEventListener('DOMContentLoaded', function() {
  const ajaxLinks = document.querySelectorAll('.ajax-link');
  const contentContainer = document.querySelector('#main-content'); // 替换为实际内容容器选择器
  
  // 绑定导航点击事件
  ajaxLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const targetUrl = this.getAttribute('href');
      
      fetch(targetUrl)
        .then(response => response.text())
        .then(html => {
          // 提取返回内容的主体部分
          const parser = new DOMParser();
          const doc = parser.parseFromString(html, 'text/html');
          const newContent = doc.querySelector('#main-content').innerHTML;
          contentContainer.innerHTML = newContent;
          // 更新浏览器地址栏
          history.pushState(null, '', targetUrl);
          // 重新初始化新页面的JS功能，比如滑块、表单交互等
          reinitPageScripts();
        })
    })
  })
  
  // 兼容浏览器前进后退操作
  window.addEventListener('popstate', function() {
    fetch(location.href)
      .then(response => response.text())
      .then(html => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        contentContainer.innerHTML = doc.querySelector('#main-content').innerHTML;
        reinitPageScripts();
      })
  })
})

• 注意事项：
  • 要额外处理新页面的专属CSS、JS资源加载，避免功能异常
  • 做好降级处理，若浏览器不支持JS，仍然可以正常整页跳转

方案2：使用无刷新特性的主题/插件（零代码方案） #

• 直接选用自带SPA（单页应用）特性的WordPress主题，这类主题默认已经实现了公共区域不刷新、仅更新内容的逻辑
• 也可以安装支持AJAX页面加载的插件，按照引导配置保留不刷新的区域为导航栏即可，无需手写开发

方案3：固定导航+优化加载（低成本折中方案） #

如果不想调整页面加载逻辑，可以用该方案弱化导航变动的感知：

• 给导航栏添加CSS固定定位，保证整页刷新时导航的视觉位置不变：

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
/* 给主体内容加和导航等高的内边距，避免内容被导航遮挡 */
.site-main {
  padding-top: 80px; /* 替换为你的导航实际高度 */
}

• 优化整站加载速度：压缩静态资源、启用页面缓存、配置CDN加速，尽可能缩短整页刷新的时间，降低导航的变动感知
• 可选配置加载骨架屏，页面重载前显示和导航样式完全一致的占位结构，进一步弱化视觉差

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