Html
    Css
    Js
body {
	background:#494A5F;
	color:#D5D6E2;
	font-weight:500;
	font-size:1.05em;
	font-family:"Microsoft YaHei","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif;
}
a {
	color:rgba(255,255,255,0.6);
	outline:none;
	text-decoration:none;
	-webkit-transition:0.2s;
	transition:0.2s;
}
a:hover,a:focus {
	color:#74777b;
	text-decoration:none;
}
.jq22-container {
	margin:0 auto;
}
/* Header */
.jq22-header {
	padding:1em 190px 1em;
	letter-spacing:-1px;
	text-align:center;
}
.jq22-header h1 {
	color:#fff;
	font-weight:600;
	font-size:2em;
	line-height:1;
	margin-bottom:0;
}
.jq22-header h1 span {
	display:block;
	font-size:60%;
	font-weight:400;
	padding:0.8em 0 0.5em 0;
	color:#fff;
}
html,* {
	margin:0;
	padding:0;
}
html {
	min-height:300vh;
}
body {
	min-height:300vh;
	background-image:linear-gradient(120deg,#fccb90 0%,#d57eeb 100%);
}
.header-navigation {
	position:fixed;
	top:0;
	width:100%;
	height:60px;
	line-height:60px;
	background-color:#333;
	text-align:center;
	box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);
	z-index:9999;
}
.link {
	color:#fff;
	text-decoration:none;
	margin:0 30px;
}
h1 {
	text-align:center;
	margin-top:170px;
	margin-bottom:50px;
	color:#fff;
}
/* Slide transitions */

	.slideUp {
	/* -webkit-transform:translateY(-100px);
	transform:translateY(-100px);
	*/
	  -webkit-transform:translateY(-100px);
	-ms-transform:translateY(-100px);
	-o-transform:translateY(-100px);
	transform:translateY(-100px);
	/*transition:transform .5s ease-out;
	*/
	  -webkit-transition:transform .5s ease-out;
	-o-transition:transform .5s ease-out;
	transition:transform .5s ease-out;
}
.slideDown {
	/*-webkit-transform:translateY(0);
	transform:translateY(0);
	*/
	  -webkit-transform:translateY(0);
	-ms-transform:translateY(0);
	-o-transform:translateY(0);
	transform:translateY(0);
	/*transition:transform .5s ease-out;
	*/
	  -webkit-transition:transform .5s ease-out;
	-o-transition:transform .5s ease-out;
	transition:transform .5s ease-out;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

js鼠标滚动自动隐藏导航菜单

0