jQuery实现侧边导航栏固定

1. 首先需要给导航栏添加一个class，例如"fixed-sidebar"
2. 使用jQuery监听窗口滚动事件$(window).scroll(function(){})
3. 在滚动事件中获取导航栏的位置和距离窗口顶部的距离，并判断是否需要固定导航栏
4. 如果需要固定，则给导航栏添加一个"fixed"的class，并设置其position为fixed，top值为0
5. 如果不需要固定，则移除"fixed"的class，恢复原来的样式

示例代码：

HTML:

<nav class="fixed-sidebar">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>

CSS:

.fixed-sidebar {
position: absolute;
top: 0;
width: 200px;
}

.fixed {
position: fixed;
top: 0;
}

JS:

$(document).ready(function() {
$(window).scroll(function() {
var navPosition = $('.fixed-sidebar').offset().top;
var scrollPosition = $(window).scrollTop();

if (scrollPosition >= navPosition) {
$('.fixed-sidebar').addClass('fixed');
} else {
$('.fixed-sidebar').removeClass('fixed');
}
});
});