在自定义组件中设定css 样式:
利用 position: fixed
利用 position: fixed
单独的css是无法完成导航条的,需要结合html,一般导航条的制作都是通过一个div包裹着ul,使用li来排列完成导航条的html部分,css中,我们需要给这个div宽高,还需要设置好li的宽,高,还有一个float属性,这样基本上导航条就制作完成,请看代码:<html>
<head>
<style>
#div1{
width:600px
height:40px
font-size:13px
}
#div1 ul li{
list-style:none
width:50px //具体的高宽需要根据实际要求
height:30px
}
</head>
<body>
<div id='div1'>
<ul>
<li><a href=''>目录1</a></li>
<li><a href=''>目录2</a></li>
<li><a href=''>目录3</a></li>
<li><a href=''>目录4</a></li>
</ul>
</div>
</body>
</html>
1、正常布局网站,导航栏也正常布局。2、自定义导航栏制作(可复制原来的导航栏,也可以另制作一份),绝对定位,隐藏。
3、在页面scroll事件中进行判断,滚动到指定像素位置,自定义的导航栏出现,并且随着scroll事件对top值不断更新,一句jquery的scrollTop。
4、如果向上回滚,判断scrollTop值,隐藏自定义导航栏。