JS-实现导航栏悬停（续2）-JavaSript-爱易网页

JS-实现导航栏悬停（续2）

日期：2014-05-16　浏览次数：20421 次

JS-实现导航栏悬停（续二）

【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%，将

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JS-实现导航栏悬停（续2）

相关资料更多>

推荐阅读更多>