如何使用JS切换页面并保持导航栏固定在顶部？

一、调整CSS实现导航栏固定 #

把导航栏的定位方式改为fixed，确保它始终停留在页面顶部，同时调整布局避免内容被遮挡：

.mid {
    width: 60%;
    margin: 0 auto;
    position: relative;
}
.navbar {
    display: inline-block;
    position: fixed; /* 改为fixed固定顶部 */
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 保持导航栏居中 */
    background: #fff; /* 加背景避免内容穿透 */
    padding: 1rem 0;
    width: 60%; /* 和.mid宽度一致 */
    z-index: 999; /* 确保导航栏在最上层 */
}

.navbar li {
    display: inline-block;
    font-size: 140%;
    margin: 0 1rem;
}

/* 给页面内容加顶部内边距，避免被导航栏遮挡 */
.page-content {
    padding-top: 80px; /* 根据导航栏实际高度调整 */
}

/* Services页面内容占满剩余屏幕 */
.services-page .page-content {
    min-height: calc(100vh - 80px); /* 100vh减去导航栏高度 */
    display: flex;
    align-items: center; /* 可选：内容垂直居中 */
    justify-content: center;
}

二、修改HTML结构 #

添加内容容器，方便JS切换页面内容：

<div class="mid">
    <ul class="navbar">
        <li><a href="home.html" class="nav-link">Home</a></li>
        <li><a href="about.html" class="nav-link">About</a></li>
        <li><a href="services.html" class="nav-link">Services</a></li>
        <li><a href="feedback.html" class="nav-link">Feedback</a></li>
        <li><a href="support.html" class="nav-link">Support</a></li>
    </ul>
</div>

<!-- 页面内容容器 -->
<div class="page-content" id="pageContent"></div>

三、JavaScript实现无刷新页面切换 #

拦截导航链接的点击事件，通过AJAX加载目标页面内容，替换当前内容区，同时给Services页面添加特殊类名：

// 获取所有导航链接
const navLinks = document.querySelectorAll('.nav-link');
const contentContainer = document.getElementById('pageContent');

// 页面加载时初始化当前页面
window.addEventListener('DOMContentLoaded', () => {
    loadPage(window.location.pathname);
});

// 拦截点击事件
navLinks.forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        const url = link.getAttribute('href');
        // 更新浏览器地址栏
        history.pushState(null, '', url);
        // 加载页面内容
        loadPage(url);
    });
});

// 处理浏览器前进后退
window.addEventListener('popstate', () => {
    loadPage(window.location.pathname);
});

// 加载页面内容的函数
function loadPage(url) {
    fetch(url)
        .then(response => response.text())
        .then(html => {
            // 提取目标页面的内容部分（假设每个页面的内容都在.page-content里）
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = html;
            const newContent = tempDiv.querySelector('.page-content').innerHTML;
            contentContainer.innerHTML = newContent;
            
            // 给Services页面添加特殊类名
            document.body.className = url.includes('services.html') ? 'services-page' : '';
        })
        .catch(error => {
            contentContainer.innerHTML = '<h2>页面加载失败</h2>';
            console.error(error);
        });
}

四、Services页面的示例结构 #

services.html里的内容要放在.page-content容器中：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="services-page">
    <div class="mid">
        <!-- 导航栏代码和其他页面一致 -->
        <ul class="navbar">
            <li><a href="home.html" class="nav-link">Home</a></li>
            <li><a href="about.html" class="nav-link">About</a></li>
            <li><a href="services.html" class="nav-link">Services</a></li>
            <li><a href="feedback.html" class="nav-link">Feedback</a></li>
            <li><a href="support.html" class="nav-link">Support</a></li>
        </ul>
    </div>
    <div class="page-content">
        <!-- Services页面的具体内容 -->
        <h1>我们的服务</h1>
        <p>这里是服务页面的详细内容...</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

关键说明 #

• 导航栏用position:fixed+transform: translateX(-50%)实现固定且居中
• 内容区的padding-top要匹配导航栏的高度，避免内容被遮挡
• Services页面通过min-height: calc(100vh - 导航栏高度)让内容占满剩余屏幕
• JS实现无刷新切换，同时支持浏览器前进后退

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