JS 实现导航栏悬停效果(续)


Posted in Javascript onSeptember 24, 2013

上次【JS-实现导航栏悬停】说到,导航栏悬停的那个页面在IE上运行的时候,会出导航栏不停的抖动问题。

解决方法如下:

将导航栏的定位方式由原来的absolute改为fixed,也不知道为什么改为fixed,就不抖了。。-_-||

div.navigation{ 
width: 800px; 
height: 40px; 
background: red; 
margin: 4px auto 0; 
top: 400px; 
left: 0px; 
position: fixed; 
}

为此,JS也得做相应的修改。

因为fixed定位是根据浏览器的可视区进行定位的,所以原来给导航栏的定位都得改变。

//记录导航条原来在页面上的位置 
var naviga_offsetTop = 0; 
var naviga_offsetLeft = 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; 
document.title = scrollTop; 
//如果向下滚动的距离大于原来导航栏离顶部的距离 
//直接将导航栏固定到可视区顶部 
if( scrollTop > naviga_offsetTop ){ 
a_navigation_bar[0].style.top = 0 + "px"; 
} else { 
//如果向下滚动的距离小原来导航栏离顶部的距离,则重新计算导航栏的位置 
a_navigation_bar[0].style.top = (naviga_offsetTop - scrollTop) + "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"); 
} 
//获取offsetLeft,即导航栏离左边框的距离 
var a_main_div = []; 
if( document.getElementsByClassName ){//Chrome, FF 
a_main_div = document.getElementsByClassName("main"); 
}else{ //IE 
a_main_div = my_getElementsByClassName("main"); 
} 
naviga_offsetLeft = a_main_div[0].offsetLeft; 
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"); 
} 
//获取offsetTop 
naviga_offsetTop = a_navigation_bar[0].offsetTop; 
a_navigation_bar[0].style.left = naviga_offsetLeft + "px"; 
//给滚动条以及鼠标加上滚动事件 
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); 
} 
}

在这个问题中,理解CSS+DIV定位(relative,absolute,static,fixed)的区别很重要。

relative,absolute,static,fixed

先看下各个属性值的定义:

1、static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

2、relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。

3、absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

4、fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

static与fixed的定位方式较好理解,在此不做分析。下面对应用的较多的relative和absolute进行分析:

1、relative。定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在。如图1:
JS 实现导航栏悬停效果(续)
图1
黄色背景的层定位为relative,红色边框区域为其在正常流中的位置。在通过top、left对其定位后,从灰色背景层的位置可以看出其正常位置依然存在。

2、absolute。定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在。如图2:
JS 实现导航栏悬停效果(续)
图2
可以看到,在将黄色背景层定位为absolute后,灰色背景层自动补上。

3、relative与absolute的主要区别:

首先,是上面已经提到过的在正常流中的位置存在与否。

其次,relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式。如图3:
JS 实现导航栏悬停效果(续)
图3
图中,红色背景层为relative定位,其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute,则情形如图4:
JS 实现导航栏悬停效果(续)
图4
可以看到,红色背景层依然定义top:20px;left:20px;但其相对的元素变为定位方式为absolute或relative的黄色背景层。因此,对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位,如图5:
JS 实现导航栏悬停效果(续)
图5
除top、left、right、bottom定位外,margin属性值的定义也符合上述规则。

Javascript 相关文章推荐
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
微信小程序网络请求实现过程解析
Nov 06 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 #Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 #Javascript
基于jquery实现的省市区级联无ajax
Sep 24 #Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 #Javascript
jquery $.each()使用探讨
Sep 23 #Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 #Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 #Javascript
You might like
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
Python map和reduce函数用法示例
2015/02/26 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
numpy中的高维数组转置实例
2018/04/17 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
Django中的forms组件实例详解
2018/11/08 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
linux安装python修改默认python版本方法
2019/03/31 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
财务管理专业毕业生求职信范文
2013/09/21 职场文书
总账会计岗位职责
2014/03/13 职场文书
验房委托书
2014/08/30 职场文书
财务工作个人总结
2015/02/27 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL