先布个局：
复制代码 代码如下:
test
1
tab1
tab2
tab3
tab4
2
3
4
5
6
7
添加简单的样式：
复制代码 代码如下:
div.main{
width: 800px;
background: #ccc;
margin: 10px auto 0;
position: relative;
}
div.content{
width: 800px;
height: 400px;
background: yellow;
margin: 10px auto 0;
}
div.navigation{
width: 800px;
height: 40px;
background: red;
margin: 4px auto 0;
top: 400px;
left: 0px;
position: absolute;
}
div.tab{
width: 195px;
height: 40px;
background: blue;
float: left;
margin-left: 5px;
}
js:
复制代码 代码如下:
//记录导航条原来在页面上的位置
var naviga_offsettop = 0;
//ie7不识别getelementsbyclassname，为了兼容自定义一个
function my_getelementsbyclassname(class_name) {
var el = [];
//获取所有元素
_el = document.getelementsbytagname('*');
//通过classname刷选
for (var i=0; iif (_el[i].classname == class_name ) {
el[el.length] = _el[i];
}
}
return el;
}
//导航条，悬停在顶部
function naviga_stay_top(){
var a_navigation_bar = [];
if(document.getelementsbyclassname){//chrome, ff
a_navigation_bar = document.getelementsbyclassname(navigation);
} else {//ie
a_navigation_bar = my_getelementsbyclassname(navigation);
}
var scrolltop = document.body.scrolltop || document.documentelement.scrolltop;
if( scrolltop > naviga_offsettop){
a_navigation_bar[0].style.top = scrolltop + px;
} else {
a_navigation_bar[0].style.top = naviga_offsettop + px;
}
}
//给导航条上四个tab，加上点击事件。
window.onload=function(){
var a_tabs = [];
if( document.getelementsbyclassname ){//chrome, ff
a_tabs = document.getelementsbyclassname(tab);
}else{ //ie
a_tabs = my_getelementsbyclassname(tab);
}
var a_contents = [];
if( document.getelementsbyclassname ){//chrome, ff
a_contents = document.getelementsbyclassname(content);
}else{//ie
a_contents = my_getelementsbyclassname(content);
}
a_tabs[0].onclick=function(){
window.scrollto(0, a_contents[2].offsettop);
}
a_tabs[1].onclick=function(){
window.scrollto(0, a_contents[3].offsettop);
}
a_tabs[2].onclick=function(){
window.scrollto(0, a_contents[4].offsettop);
}
a_tabs[3].onclick=function(){
window.scrollto(0, a_contents[5].offsettop);
}
//获取页面上，导航条到顶部的位置
var a_navigation_bar = [];
if(document.getelementsbyclassname){//chrome, ff
a_navigation_bar = document.getelementsbyclassname(navigation);
} else {//ie
a_navigation_bar = my_getelementsbyclassname(navigation);
}
naviga_offsettop = a_navigation_bar[0].offsettop;
//给滚动条以及鼠标加上滚动事件
// window.onscroll= naviga_stay_top;
// document.onmousewheel= naviga_stay_top;
if( window.attachevent) //ie
{
window.attachevent(onmousewheel, naviga_stay_top);
window.attachevent(onscroll, naviga_stay_top);
document.attachevent(onmousewheel, naviga_stay_top);
document.attachevent(onscroll, naviga_stay_top);
} else {//chrome ,ff
window.addeventlistener(mousewheel, naviga_stay_top,false);
window.addeventlistener(scroll, naviga_stay_top,false);
document.addeventlistener(mousewheel, naviga_stay_top,false);
document.addeventlistener(scroll, naviga_stay_top,false);
}
}
不知道什么原因，在ie上，滚动滚动条或者鼠标滚轮的时候，导航栏会抖动;而在chrome和ff上有没有任何问题。还望高人指点。