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 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
基于jQuery试卷自动排版系统
Jul 18 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 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
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python判断操作系统类型代码分享
2014/11/22 Python
python实现中文输出的两种方法
2015/05/09 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
pandas中的series数据类型详解
2019/07/06 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
购买大码女装:Lane Bryant
2016/09/07 全球购物
AC Lens:购买隐形眼镜
2017/02/26 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
活动总结报告怎么写
2014/07/03 职场文书
学习计划书怎么写
2014/09/15 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
实习介绍信模板
2015/01/30 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js