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 相关文章推荐
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
Javascript 面试题随笔
Mar 31 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
原生JS实现pc端轮播图效果
Dec 21 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的日期与时间函数技巧
2008/04/24 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
Python对文件操作知识汇总
2016/05/15 Python
详解Python pygame安装过程笔记
2017/06/05 Python
Python Grid使用和布局详解
2018/06/30 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
经销商会议欢迎词
2014/01/11 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
商务日语专业自荐信
2014/04/17 职场文书
教师师德演讲稿
2014/05/06 职场文书
房地产广告策划方案
2014/05/15 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
党建工作汇报材料
2014/12/24 职场文书
酒店员工手册范本
2015/05/14 职场文书
生产车间管理制度
2015/08/04 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android