JS 实现导航栏悬停效果

前端技术 2023/09/07 JavaScript
JS-实现导航栏悬停

先布个局：
复制代码 代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<head>
<script type=\"text/javascript\" src=\"test.js\"></script>
<link rel=\"stylesheet\" type=\"text/css\" href=\"test.css\"></link>
<title>Test</title>
</head>
<body>
<div class=\"main\">
<div class=\"content\">1</div>
<div id=\"nav\" class=\"navigation\">
<div class=\"tab\">tab1</div>
<div class=\"tab\">tab2</div>
<div class=\"tab\">tab3</div>
<div class=\"tab\">tab4</div>
</div>
<div class=\"content\">2</div>
<div class=\"content\">3</div>
<div class=\"content\">4</div>
<div class=\"content\">5</div>
<div class=\"content\">6</div>
<div class=\"content\">7</div>
</div>
</body>
</html>

添加简单的样式：
复制代码 代码如下:

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; i<_el.length; i++ ) {
if (_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上有没有任何问题。还望高人指点。

本文地址：https://www.stayed.cn/item/19770

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案