置顶菜单demo

最新推荐文章于 2023-09-21 11:00:23 发布

weixin_34198797

最新推荐文章于 2023-09-21 11:00:23 发布

阅读量95

点赞数

　　一朋友需要置顶菜单的功能，给了个网站，让弄下来。看了下，就把样式及效果拔了下来。去掉了复杂的东西，只保留了其基本实现。有需要的朋友可以拿去用用。

<style>
	#navigation{ text-align:center; height:80px; line-height:80px; position:relative; width:100%; z-index:998; top:0; left:0;
	-webkit-transition: height .3s cubic-bezier(0.39, 0.575, 0.565, 1);
	-o-transition: height .3s cubic-bezier(0.39, 0.575, 0.565, 1);
	-moz-transition: height .3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:height .3s cubic-bezier(0.39, 0.575, 0.565, 1);
 }
#navigation.fixed{ position:fixed; height:50px; line-height:50px; }
	#navigation li{ display:inline-block; padding:0 20px; *display:inline; }
	#navigation li a{ color:#b1b1b1;
		-webkit-transition: all .3s cubic-bezier(0.39, 0.575, 0.565, 1);
		-o-transition: all .3s cubic-bezier(0.39, 0.575, 0.565, 1);
		-moz-transition: all .3s cubic-bezier(0.39, 0.575, 0.565, 1);
		transition:all .3s cubic-bezier(0.39, 0.575, 0.565, 1);
	 }
	#navigation li.current a,#navigation li:hover a{ color:#70ca10; }
</style>
1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
<div id="navigation">
			<ul>
				<li class="current"><a href="#" target="_self">Home</a></li><li><a href="#" target="_self">About</a></li><li><a href="#" target="_self">Contact</a></li><li><a href="#" target="_self">links</a></li>			</ul>
		</div>
1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
	$(function(){
		$(window).scroll(function(){
			var t = $(window).scrollTop();
			if(t>$('.header-wrap').height()){
				$('#navigation').addClass('fixed');
			}else{
				$('#navigation').removeClass('fixed');
			}
		});
	});
</script>