开发者学堂课程【移动 Web 前端开发：吸顶导航 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8477
吸顶导航
目录
一、具体内容
二、应用
一、 具体内容
在页面滚动时需要吸附式导航。代码为
…
属性含义
data-spy声明是一个吸顶组件
data-offset-top="60" 表示滚动距离顶部 60px 时显示导航条
data-offset-bottom="200 表示滚动距离底部 60px 时显示导航条
一般来讲，只用 data-offset-top 即可。
二、应用
在导航栏中增加 data-spy=”affix”声明是一个affix组件。<nav class=”navbar” wjs_nav data_spy=”affix”>
刷新发现导航消失了，是因为层级原因，若要使元素固定，要把定位变为 fixed 的固定定位。
当滑动到轮播图处发现导航消失，是因为轮播图的层级更高，可以增加它的层级使其在轮播图处也能显示:
.wjs_nav{
z-index:99999
}
无论是绝对定位还是固定定位，设置定位的方式之后，容器的宽度由内容决定。内容由 content 决定 ，content 为1170px，整个的 div 宽度也为1170px。
吸附导航固定在顶部通栏下面原因是只设置了 fixed ，但是没有确定坐标。没有设置 left 和 top ，0,它默认基于原来的位置作定位。如果需要导航浮动上去，要设置 left 和 top ,要设置和浏览器一样宽，需要单独给它设置宽度。
.wjs_nav{
z-index:99999;
width:100%;
top:0;
left：0
导航栏把 topbar 遮住，并且已经是浮动状态，原因是没有设置 data-offset-top，不设置则默认为0，当页面滚动距离为0时就有了这个效果。
应该书写为：
<nav class=”navbar” wjs_nav data_spy=”affix” "data-offset-top="1">
此时需要滚动页面，距离顶部有1个像素就会产生吸顶效果，如果设置为，则距离顶部200时才会显示吸顶导航。
