<!DOCTYPE html>
<html>
<head>
<title>haran.info_jquery实例_固定在顶部的菜单_www.jb200.com</title>
<metahttp-equiv="content-type"content="text/html; charset=UTF-8"/>
<scriptsrc="../js/jquery-1.8.3.min.js"type="text/
javascript"></script><!-- 引入Jquery -->
#mynav{
width:100%;
height:53px;
line-height:50px;
text-align:center;
background-position:0-97px;
}
.clr{
height:20px;
}
.containerdiv{
width:100%;
height:100%;
text-align:center;
}
<script type="text/javascript">
$(document).ready(function() {
//获取要定位元素距离浏览器顶部的距离
varnavH = $("#mynav").offset().top;
//
滚动条事
$(window).scroll(function(){
//获取滚动条的滑动距
varscroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反
if(scroH>=navH){
$("#mynav").css({"position":"fixed","top":0});
}elseif(scroH<navH){
$("#mynav").css({"position":"static","margin":"0 auto"});
}
console.log(scroH==navH);
})
});
</script>
