当前位置: 编程技术>jquery
jquery实现固定在顶部的菜单
来源: 互联网 发布时间：2014-09-03
本文导语: 借助Jquery，可以很容易让菜单固定在网页顶部。 那么，同样也可以实现固定在底部、固定内容固定在固定位置，这个大家课后自己练习下。 1，引入jquery 代码示例: haran.info_jquery实例_固定在顶部的菜单_www. 2，布局样...
借助Jquery，可以很容易让菜单固定在网页顶部。
那么，同样也可以实现固定在底部、固定内容固定在固定位置，这个大家课后自己练习下。
1，引入jquery
代码示例:
haran.info_jquery实例_固定在顶部的菜单_www.
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，功能
代码示例:
$(document).ready(function() {
//获取要定位元素距离浏览器顶部的距离
varnavH = $("#mynav").offset().top;
//滚动条事
$(window).scroll(function(){
//获取滚动条的滑动距
varscroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反
if(scroH>=navH){
$("#mynav").css({"position":"fixed","top":0});
}elseif(scroH
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
站内导航:
特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！