随着滚动条下拉，导航栏置顶

想做一个这样的效果，当我们下拉滚动条时，写的导航栏置顶。
这是效果图

先学习用到的基本知识

jQuery CSS 操作 - scrollTop() 方法

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

jQuery CSS 操作 - offset() 方法

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

jQuery 属性操作 - attr() 方法

attr() 方法设置或返回被选元素的属性值。

var top=$("#aaa").offset().top;
意思是：获取id是aaa元素的top坐标。

$("#aaa").attr(“style”,“position:fixed;top:0;left:0;zindex:10;”);
意思是：给id是aaa的元素增加了几个样式，position：fixed；给元素定位，top值为0，left值为0。

下面是我写的例子

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">*{margin: 0; padding: 0;}a{cursor: pointer;}#first{width: 100%;height: 44px;background: red;}#second{width: 100%;height: 300px;background: ;}#top{width: 100%;height: 55px;}#bottom{width: 100%;height: 300px;padding-top: 100px;}.left{width: 70%;height: 55px;float: left;padding-left: 20px;display: ;background: ;}.left li{height: 55px;margin-right: 20px;float: left;list-style: none;padding-top: 10px;}.right{width: 30%;height: 45px;display: ;float: right;margin-top: -55px;padding-top: 10px;background: ;}#ccc{height: 300px;background: ;display: block;}.aaa{margin-top: 100px;}.bbb{}#three{width: 100%;height: 4000px;}
</style>
</head>
<body><div id="first"><span>菜单</span><span>腾讯云</span><span>备案</span><span>控制台</span></div><div id="second"><div id="top"><div class="left"><li><a>云社区</a></li><li><a>专栏</a></li><li><a>问答</a></li><li><a>沙龙</a></li><li><a>快讯</a></li><li><a>团队主页</a></li><li><a>开发者手册</a></li><li><a>云学院</a></li></div><input type="hidden" name="search"><div class="right"><span class="ban"><a>写文章</a><span><span class="bbn"><a>提问</a><span><span class="bcn"><a>登录</a><span><span class="bcn"><a>注册</a><span></div></div><div id="bottom"><div id="ccc"><span class="aaa">专栏</span><span class="bbb">分享技术干货，专注打造技术影响力</span><p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p></div></div></div><div id="three"></div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">var top=$("#top").offset().top;$(window).scroll(function () {if ($(window).scrollTop() >= 33) {$("#top").attr("style", "position:fixed;top:0;left:0;z-index:10;background:black;color:white;");} else {$("#top").attr("style", "");}}).trigger("scroll");
</script>
</body>
</html>

关于导航置顶的代码是这部分

<script type="text/javascript">var top=$("#top").offset().top;$(window).scroll(function () {if ($(window).scrollTop() >= 33) {$("#top").attr("style", "position:fixed;top:0;left:0;z-index:10;background:black;color:white;");} else {$("#top").attr("style", "");}}).trigger("scroll");
</script>

//获取#top的top值
//当滚动导航栏时定义函数
//当导航栏距顶部33px时改变#top的style，因为定义的#first div的高度是33px
//修改#top样式
//否则就不修改

这是网页刚打开的时候

第一行红色部分就是#first盒子，height是33px
第二行就是需要浏览置顶的#top盒子
第三行是方便看清楚效果用的#three盒子

当我们下滑滚轮时，可以看到文字是在#second下面的，因为我设置了#top的z-index值。
可以看到这样的效果