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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
如何在vue 中引入使用jquery
Nov 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
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
详解Python 中的容器 collections
2020/08/17 Python
Python模块常用四种安装方式
2020/10/20 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
区域总监的岗位职责
2013/11/21 职场文书
运动会广播稿60字
2014/01/15 职场文书
个人委托书怎么写
2014/04/04 职场文书
结婚保证书范文
2014/04/29 职场文书
社区春季防火方案
2014/06/02 职场文书
职工小家建设活动方案
2014/08/25 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
先进工作者推荐材料
2014/12/23 职场文书
环卫处个人工作总结
2015/03/04 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
校运会通讯稿
2015/07/18 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
使用refresh_token实现无感刷新页面
2022/04/26 Javascript