前端开发：滚动网页导航固定在顶部
新的一个项目要求：滚动网页，但是导航条固定在顶部。
主要是产品搜索页面！当产品列表很长时，搜索条件固定在顶部，提高用户的体验感！
[html]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/jquery.js" ></script>
<script type="text/javascript">
function dhDiv(ee1){
//导航距离屏幕顶部距离
var _defautlTop = $("#"+ee1).offset().top - $(window).scrollTop();
//导航距离屏幕左侧距离
var _defautlLeft = $("#"+ee1).offset().left - $(window).scrollLeft();
var _top = $("#"+ee1).css('top');
var _left = $("#"+ee1).css('left');
var _zIndex = $("#"+ee1).css('z-index');
//鼠标滚动事件
$(window).scroll(function(){
if($(this).scrollTop() > _defautlTop){
//IE6不认识position:fixed，单独用position:absolute模拟
if($.browser.msie && $.browser.version=="6.0"){
$("#"+ee1).css({'position':'absolute','top':eval(document.documentElement.scrollTop),'left':_defautlLeft,'z-index':99999});
//防止出现抖动
// $("html,body").css({'background-image':'url(about:blank)','background-attachment':'fixed'});
}else{
$("#"+ee1).css({'position':'fixed','top':0,'left':_defautlLeft,'z-index':99999});
}
}else{
$("#"+ee1).css({'position':'static'});
}
});
}
$(function(){
window.onscroll = function(){ dhDiv('box_tools'); }
window.onresize = function(){ dhDiv('box_tools'); }
});
</script>
</head>
<body style="background-color:#e6e6e6;">
<input type="hidden" id="topv" />
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="box_tools" style="width:90%;border:5px solid #f00;padding:20px;background-color:#fff;">
这是测试页面!
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
[/html]
导航条滚动到顶部时固定在页面上方
川公网安备51162302000234