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


Posted in Javascript onSeptember 24, 2013

【JS-实现导航栏悬停】
【JS-实现导航栏悬停(续)】

用Jquery重新写完这个页面之后,发现原来的方法还有是有几个问题:

1.首先Js代码冗余,导航条上的Tab是用js实现跳转而不是超链接;

2.还有导航条本身用fixed定位,但没有被设置为水平居中,而是在JS中更改left值使其居中。

问题2就导致了,当浏览器窗口尺寸发生变化的时候,浏览器中的div的位置都发生了变化,也就导致了没法通过页面中的div动态的给已fixed定位的导航条来定位。

最终的代码更改如下:

test.html

<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
<script type="text/javascript" src="test.js"></script> 
<link rel="stylesheet" type="text/css" href="test.css"></link> 
<title>Test</title> 
</head> 
<body> 
<div id="main_div" class="main"> 
<div id="content_div1" class="content">1</div> 
<div id="nav" class="navigation"> 
<a href="#content_div3"><div id="tab_div1" class="tab">tab1</div></a> 
<a href="#content_div4"><div id="tab_div2" class="tab">tab2</div></a> 
<a href="#content_div5"><div id="tab_div3" class="tab">tab3</div></a> 
<a href="#content_div6"><div id="tab_div4" class="tab">tab4</div></a> 
</div> 
<div id="content_div2" class="content">2</div> 
<div id="content_div3" class="content">3</div> 
<div id="content_div4" class="content">4</div> 
<div id="content_div5" class="content">5</div> 
<div id="content_div6" class="content">6</div> 
<div id="content_div7" class="content">7</div> 
</div> 
</body> 
</html>

test.js
//记录导航条原来在页面上的位置 
var naviga_offsetTop = 0; //使导航条,悬停在顶部 
function naviga_stay_top(){ 
//获取滚动距离 
var scrollTop = $(document).scrollTop(); 
//如果向下滚动的距离大于原来导航栏离顶部的距离 
//直接将导航栏固定到可视区顶部 
if( scrollTop > naviga_offsetTop ){ 
$("#nav").css({"top": "0px"}); 
} else { 
//如果向下滚动的距离小原来导航栏离顶部的距离,则重新计算导航栏的位置 
$("#nav").css({"top": naviga_offsetTop - scrollTop + "px"}); 
} 
} 
function onload_function(){ 
//记录初始状态导航栏的高度 
naviga_offsetTop = $("#nav").attr("offsetTop"); 
//绑定滚动和鼠标事件 
$(window).bind("scroll", naviga_stay_top); 
$(window).bind("mousewheel",naviga_stay_top); 
$(document).bind("scroll", naviga_stay_top); 
$(document).bind("mousewheel",naviga_stay_top); 
} 
$(document).ready( onload_function );

test.css:注意navigation类的样式
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: 0 auto; 
top: 400px; 
left:50%; 
position: fixed; 
margin-left:-400px; 
} 
div.tab{ 
width: 195px; 
height: 40px; 
background: blue; 
float: left; 
margin-left: 5px; 
}

总结:

出现这个问题的原因还是CSS的布局定位不熟悉。

在这里没法通过:margin 0 auto;来设置导航条div水平居中,因为fixed定位的元素没法通过这种方式来定位。

通过margin 0 auto;来定位的元素不能为fixed定位,并且其父元素必须要有固定的宽度。

那么怎么使fixed定位的元素水平居中呢?

通过:left: 50%,将该元素的最左边与父元素宽的中点对其,然后通过marg-left: [该元素宽度的1/2]px;来将这个元素向左移动它的宽度的一般,从而使这个元素居中。

Javascript 相关文章推荐
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 #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
You might like
Drupal简体中文语言包安装教程
2014/09/27 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
python转换摩斯密码示例
2014/02/16 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
浅谈python标准库--functools.partial
2019/03/13 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
使用python绘制二维图形示例
2019/11/22 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
python是怎么被发明的
2020/06/15 Python
CLR与IL分别是什么含义
2016/08/23 面试题
毕业生机械建模求职信
2013/10/14 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
个人整改方案范文
2014/10/25 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
运动会加油稿20字
2014/11/15 职场文书
奖学金个人总结
2015/03/04 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
社区党建工作总结2015
2015/05/13 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL
Python中的 No Module named ***问题及解决
2022/07/23 Python