js实现网站头部导航滚动缩小效果代码
代码语言:html
所属分类:加载滚动
代码描述:js实现网站头部导航滚动缩小效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> header.smaller { height: 75px; } header.smaller h1#logo { width: 150px; height: 75px; line-height: 55px; font-size: 55px; margin: 0; } header.smaller nav a { line-height: 75px; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { color: #505050; font-family: "Open Sans", sans-serif; font-weight: 300; font-size: 16px; line-height: 1.8; } h1, h2, h3, h4, h5, h6 { line-height: 1; font-weight: 100; color: #77C7AC; } a { text-decoration: none; color: #fcfcfc; font-weight: 300; } a:hover { color: #3c3c3c; } #wrapper { width: 100%; margin: 0 auto; } #main { background-color: #fff; padding-top: 150px; min-height:500px; } .container { width: 80%; margin: 0 auto; padding: 0 30px; } section { padding: 60px 0; } section h1 { font-weight: 700; margin-bottom: 10px; } section p { margin-bottom: 30px; } section p:last-child { margin-bottom: 0; } section.color { background-color: #f4f4f4; } header { width: 100%; height: 10em; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 999; border-bottom:solid 0.5em #f4f4f4; background-color: #394e63; transition: height 0.3s; } header h1#logo { display: inline-block; line-height:3em; margin: 0; padding:0 1em; background-color:#fd5559; float: left; font-family: "Open Sans", sans-serif; font-size: 60px; color: #fcfcfc; text-shadow: 0.1em 0.03em #C0392B; font-weight: 400; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } header nav { display: inline-block; float: right; } header nav a { line-height: 150px; margin-left: 20px; color: #fcfcfc; font-weight: 300; font-size: 1em; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } header nav a:hover { color: #fd5559; } header.smaller { height: 75px; } header.smaller h1#logo { line-height: 75px; font-size: 30px; } header.smaller nav a { line-height: 75px; } footer { background-color: #3c3c3c; text-align: center; min-height:17em; color: #bababa; } footer a { display: inline-block; margin: 0; text-decoration:underline; } footer div.col { width:20%; display:inline-block; vertical-align: top; } footer col a { display:block; } footer ul li a:hover { color: #fd5559; } footer ul li a { color: #bababa; } footer div#copy { margin-top: 1em; padding:0; } footer div#copy a { color: #fd5559; } footer div.container { position:relative; } footer ul{ list-style:none; margin-top:2em; padding:0; } footer ul li { text-align:left; margin:0; padding:0; } .clearfix:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } @media all and (max-width: 760px) { header h1#logo { display: block; float: none; margin: 0 auto; height: 100px; line-height: 80px; text-align: center; } header nav { display: block; float: none; height: 50px; text-align: center; margin: 0 auto; } header nav a { line-height: 50px; margin: 0 10px; } header.smaller { height: 75px; } header.smaller h1#logo { height: 40px; line-height: 40px; font-size: 30px; width:100%; } header.smaller nav { height: 35px; } header.smaller nav a { line-height: 35px; } footer div.col { width:100%; display:inline-block; vertical-align: top; } footer ul li { display:inline-block; margin:0 0.5em; float:left; } } @media all and (max-width: 600px) { .container { width: 100%; } footer a { display: block; } } </style> </head> <body translate="no"> <div id="wrapper"> <header id="js-header"> <div class="container clearfix"> <h1 id="logo">Apples</h1>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0