JS 实现导航栏悬停效果(续2)
更新时间：2013年09月24日 16:07:30 作者：
发现原来的方法还有是有几个问题：首先Js代码冗余，导航条上的Tab是用js实现跳转而不是超链接，还有导航条本身用fixed定位，但没有被设置为水平居中，而是在JS中更改left值使其居中
【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；来将这个元素向左移动它的宽度的一般，从而使这个元素居中。
【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；来将这个元素向左移动它的宽度的一般，从而使这个元素居中。
相关文章
这篇文章主要为大家详细介绍了原生js实现抽奖小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
本文主要介绍了JS仿JQuery选择器功能的实例，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
location是javascript里面管理地址栏的内置对象.2010-11-11
这篇文章主要介绍了JS实现点击文字对应DIV层不停闪动效果的方法,实例分析了javascript操作div层的效果,非常实用,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Javascript语言对继承实现的并不好，需要工程师自己去实现一套完整的继承机制。下面我们由浅入深的系统掌握使用javascript继承的技巧，对javascript继承相关知识感兴趣的朋友一起看看吧2015-12-12
一篇随笔中网友 skyaspnet 问我如何压缩HTML，当时回答是推荐他使用gzip，后来想想，要是能把所有的html，jsp(aspx)在运行前都压缩成1行未免不是一件好事啊。2010-06-06
这篇文章主要介绍了Uni-app返回上一页面并携带参数的实现方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-06-06
下面小编就为大家带来一篇javascript 将共享属性迁移到原型中去的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
在一个项目中需要进行日期的格式化，后台传到前端是时间的整数（Date.getTime),当后台数据返回字符串时，发现转换日期时在ie下变成NaN，但是真的是这样吗？接下来我们慢慢分析2012-10-10
这篇文章主要介绍了JavaScript通过元素的ID和name设置其样式，下面有个不错的示例，感兴趣的朋友可以测试下2014-07-07
最新评论