脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 导航栏悬停

JS 实现导航栏悬停效果

 更新时间：2013年09月23日 15:28:26   作者：  
使用js实现的导航栏悬停效果在IE上，滚动滚动条或者鼠标滚轮的时候，导航栏会抖动;而在Chrome和FF上有没有任何问题
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上有没有任何问题。还望高人指点。
您可能感兴趣的文章:

相关文章

  • 按下回车键指向下一个位置的一个函数代码

    按下回车键指向下一个位置的一个函数代码

    本篇文章主要是对按下回车键指向下一个位置的一个函数代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-03-03
  • Bootstrap和Java分页实例第一篇

    Bootstrap和Java分页实例第一篇

    这篇文章主要为大家详细介绍了Bootstrap和Java分页实例第一篇，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • js DIV滚动条随机位置的设置技巧

    js DIV滚动条随机位置的设置技巧

    刚才一个朋友告诉我他的blog友情链接太多了，所以把所有链接放到一个DIV中，加了个滚动条，可是他又不想每次别人来看，看到的都是前面几个链接，于是问我有没有什么办法，想了一个，呵呵，正好有个办法
    2008-11-11
  • javascript将扁平的数据转为树形结构的高效率算法

    javascript将扁平的数据转为树形结构的高效率算法

    这篇文章主要介绍了javascript将扁平的数据转为树形结构的高效率算法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解

    JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解

    这篇文章主要介绍了JavaScript实现的原生态兼容IE6可调可控滚动文字功能,简单说明了文字滚动的实现原理并结合具体实例形式给出了javascript文字滚动功能的具体实现代码,需要的朋友可以参考下
    2017-09-09
  • Javascript常用小技巧汇总

    Javascript常用小技巧汇总

    这篇文章主要介绍了Javascript常用小技巧,实例汇总了javascript运算符、表达式及遍历等常用技巧,需要的朋友可以参考下
    2015-06-06
  • 浅谈redux, koa, express 中间件实现对比解析

    浅谈redux, koa, express 中间件实现对比解析

    这篇文章主要介绍了浅谈redux, koa, express 中间件实现对比解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Javascript图片上传前的本地预览实例

    Javascript图片上传前的本地预览实例

    图片的上传预览功能主要用于图片上传前的一个效果的预览，这篇文章主要介绍了Javascript图片上传前的本地预览实例,需要的朋友可以参考下
    2014-06-06
  • js中apply和Math.max()函数的问题及区别介绍

    js中apply和Math.max()函数的问题及区别介绍

    这篇文章主要介绍了js中apply和Math.max()函数的问题，本文给大家带来两种答案，每一种答案给大家介绍的非常详细，在文章底部给大家提到了js中Math.max.apply和Math.max的区别，感兴趣的朋友一起看看吧
    2018-03-03
  • 原生Js与jquery的多组处理, 仅展开一个区块的折叠效果

    原生Js与jquery的多组处理, 仅展开一个区块的折叠效果

    同一个页面, 有多组(不固定), 每组区块数量不一定一样的小区块. 要求每次只展开一个区块，需要的朋友可以参考下。
    2011-01-01

最新评论