A-A+

jQuery导航顶部固定

2015年10月10日 jquery 暂无评论 阅读 69 次

jQuery导航顶部固定

css设置

position: fixed;top:0; z-index: 1

原理一:

$(window).scroll(function () {     //浏览器滚动条滚动时触发的事件
     //设置你的导航条相对定位于顶部即可   
 });

二: 在顶部时被其他层挡住.

<html> 
<head> 
<style> 
* { 
padding:0; 
margin:0; 
border:0; 
} 
#fixed_header { 
position:fixed; 
z-index:1; 
top:0; 
width:100%; 
background-color:#ccc; 
} 
#navi { 
margin:0 auto; 
text-align:center; 
} 
li { 
list-style-type:none; 
display:inline; 
} 
#real_header { 
position:absolute; 
width:100%; 
z-index:2; 
background-color:#ccc; 
} 
#entry { 
margin:0 auto; 
text-align:center; 
background-color:#ccc; 
} 
</style> 
</head> 
<body> 
<div id="fixed_header"> 
<div id="navi"> 
<ul> 
<li>News</li> 
<li>Book</li> 
<li>Game</li> 
<li>Sports</li> 
</ul> 
</div> 
</div> 
<div id="real_header"> 
<div id="entry"> 
<p>This is welcome entry</p> 
</div> 
<div id="navi"> 
<ul> 
<li>News</li> 
<li>Book</li> 
<li>Game</li> 
<li>Sports</li> 
</ul> 
</div> 
</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/> 
<br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/> 
</body> 
</html>

方法三:

$(window).on("scroll", function () {

var elm = $('.nav');
var startPos = $(elm).offset().top - 80;
$.event.add(window, "scroll", function () {
var p = $(window).scrollTop();
$(elm).css('position', ((p) > startPos) ? 'fixed' : 'static');
$(elm).css('top', ((p) > startPos) ? '0.425rem' : '');
$(elm).css('z-index', 999);

});
})

方法四:http://www.xwcms.net/js/dhcd/29834.html

 

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录