如果达到,为导航条添加position:fixed属性,否则去掉该属性
需要监听scroll事件,scrollY为滚动条距顶端距离,在监听函数里计算滚动条位置即可
一、定义一个盒子(“menu”),用来装这个导航的。二、用无序列表(ul)中的列(li)放导航的内容。
三、把li的浮动(float)设置为向左浮动(float:left;),这样,就实现了水平导航条了。
四、在做其他的一些修饰。(下面我给我弄的一个简单的导航条给你理解)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#menu{
width:500px
margin:0 auto/*令盒子居中*/
font-size:20px /*定义字体的大小*/
}
ul{
margin:0padding:0/*把浏览器默认的间隔去掉*/
list-style:none /*把前面的序列号去掉*/
}
li{
float:left /*向左浮动,这个是实现水平的重要步骤!!*/
padding:0 15px /*li里面的字体和边框的距离*/
}
a{
text-decoration:none /*去掉超链接的下划线*/
color:#333 /*超链接的字体颜色*/
}
a:hover{
color:#696
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
</ul>
</div>
</body>
</html>