悬停导航

		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.web{
				height: 2000px;
				background: skyblue;
				width: 100%;
				overflow: hidden;
			}
			.test{
				width: 100%;;
				height: 100px;
				background: pink;
				margin-top: 300px;
			}
			.test1{
				position: fixed;
				top: 0;
				left: 0;
				margin-top: 0px;
			}
		</style>

		<div class="web">
			<div class="test"></div>
		</div>

		//获取该元素到html文档顶部的距离
			var getTop=$(".test").offset().top;
			$(window).scroll(function(){
				//滚动条的距离
				var getWindow=$(window).scrollTop();
				if(getWindow>=getTop){
					$(".test").addClass("test1")
				}else{
					$(".test").removeClass("test1")
				}
			})