jquery实现固定在顶部的菜单
发布时间：2015-11-01 编辑：jiaochengji.com
本文介绍下，用jquery实现固定在顶部的菜单的一段代码，有兴趣的朋友，可以研究下。
借助jquery，可以很容易让菜单固定在网页顶部。
那么，同样也可以实现固定在底部、固定内容固定在固定位置，这个大家课后自己练习下。
1，引入jquery
复制代码 代码示例:
<!DOCTYPE html>
<html>
<head>
<title>haran.info_jquery实例_固定在顶部的菜单_www.jbxue.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 -->
<html>
<head>
<title>haran.info_jquery实例_固定在顶部的菜单_www.jbxue.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 -->
2，布局样式
复制代码 代码示例:
#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;
}
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;
}
3，功能
复制代码 代码示例:
<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>
$(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>
您可能感兴趣的文章：
jquery实现固定在顶部的菜单
CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
7款风格新颖的jQuery/CSS3菜单导航分享
网页中返回顶部代码(多种方法)另附注释说明
jquery实现的固定底部的菜单代码
jquery固定底网站底部菜单效果
Jquery 下拉菜单的实现代码一例
CSS基本布局16例
jquery固定底网站底部菜单效果
上一篇：Jquery 动态实现图片缩略的代码
下一篇：jQuery晃动层效果一例
[关闭]