JS 实现导航栏悬停效果


Posted in Javascript onSeptember 23, 2013

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上有没有任何问题。还望高人指点。
Javascript 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 Javascript
jquery购物车实时结算特效实现思路
Sep 23 #Javascript
js下拉菜单语言选项简单实现
Sep 23 #Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 #Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 #Javascript
js/html光标定位的实现代码
Sep 23 #Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 #Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 #Javascript
You might like
php 获取远程网页内容的函数
2009/09/08 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
php实现小程序支付完整版
2018/10/09 PHP
html读出文本文件内容
2007/01/22 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
学习ExtJS Panel常用方法
2009/10/07 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
Python中的元组介绍
2019/01/28 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
制药工程专业毕业生推荐信
2013/12/24 职场文书
房地产广告词大全
2014/03/19 职场文书
实习介绍信模板
2015/01/30 职场文书
python实现Nao机器人的单目测距
2021/09/04 Python