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 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
JavaScript 高效运行代码分析
Mar 18 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
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
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
js tab效果的实现代码
2009/12/26 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
Python 中迭代器与生成器实例详解
2017/03/29 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
python url 参数修改方法
2018/12/26 Python
python画双y轴图像的示例代码
2019/07/07 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
利用python 读写csv文件
2020/09/10 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
农行实习自我鉴定
2013/09/22 职场文书
项目经理的岗位职责
2013/11/23 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
2014年检验科工作总结
2014/11/22 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
一文搞懂MySQL索引页结构
2022/02/28 MySQL
SQL Server删除表中的重复数据
2022/05/25 SQL Server
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技