实现效果：
1.滚动鼠标滑轮，到达上方导航条时，上方导航条固定在最上面，如果不超过不固定
2.快到最左端导航条时，左端导航条固定在左边
3.在这些之外范围，左端导航条和上方导航条恢复原样。
实现过程：
1.获得最上方header的高度，（header之下是导航条nav）
2.当鼠标滚动超过这个高度时,让导航条的位置固定在最上方
3.继续滑动鼠标，当窗口上方到达做导航条上方一定距离时（这里是120px）
让左导航条固定。（这里是top:120px; left:100px）
4.当没有在这些范围内，所有导航条恢复原位置。
实现细节：
1. position: fixed; /*固定位置但会脱离标准文档流*/
2. pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和
垂直方向滚动的像素。
3. var scrollTop = document.body.scrollTop; 在谷歌浏览器中不行，
Microsoft edge中可以360浏览器中也可以，
4.var scrollTop = document.documentElement.scrollTop; //在谷歌浏览器
中可以，IE浏览器中也行，Microsoft edge不可以。
5.所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。注意：
IE 8 及 更早 IE 版本不支持该属性,但可以使用document.documentElement.scrollLeft和document.documentElement.scrollTop属性 。
6.兼容写法：var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
7.vertical-align: top;——垂直对齐文本顶部
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随鼠标滚动的导航条</title>
<style>
*{
padding: 0;
margin:
这篇博客详细介绍了如何使用JavaScript编写一个随鼠标滚动而动态变化的导航条。通过逐步解析实现效果、过程和关键细节，最终展示完整的代码实现。
最低0.47元/天 解锁文章
扫一扫
1019
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
