要制作固定侧边栏和滚动导航效果，我们可以使用 CSS 的 position 属性和 scroll-behavior 属性。
首先，我们需要将侧边栏的 position 属性设置为 fixed，这样它就会固定在页面上。例如：
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 200px;
}接下来，我们需要为导航链接设置 scroll-behavior 属性，以实现平滑滚动效果。例如：
.nav-link {
scroll-behavior: smooth;
}最后，我们可以使用 JavaScript 来实现滚动时高亮当前导航链接的效果。例如：
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.nav-link');
window.addEventListener('scroll', () => {
const current = sections.length - [...sections].reverse().findIndex(section => window.scrollY >= section.offsetTop - 50) - 1;
navLinks.forEach(link => link.classList.remove('active'));
navLinks[current].classList.add('active');
});上述代码中，我们监听了窗口的滚动事件，并计算出当前应该高亮的导航链接。然后，我们使用 classList 属性来添加或移除 active 类，以实现高亮效果。
需要注意的是，为了实现滚动时高亮导航链接的效果，我们需要为每个 section 添加一个对应的 id，并将导航链接的 href 属性设置为该 id。例如：
<nav>
<ul>
<li><a class="nav-link" href="#section1">Section 1</a></li>
<li><a class="nav-link" href="#section2">Section 2</a></li>
<li><a class="nav-link" href="#section3">Section 3</a></li>
</ul>
</nav>
<section id="section1">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<section id="section3">
<h2>Section 3</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>这样，我们就可以使用 CSS 和 JavaScript 来实现固定侧边栏和滚动导航效果了。