开发者学堂课程【移动 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:9
9999
}
无论是绝对定位还是固定定位,设置定位的方式之后,容器的宽度由内容决定。内容由 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时才会显示吸顶导航。