为了账号安全,请及时绑定邮箱和手机立即绑定

关于根据滚动自动调整导航栏大小

关于根据滚动自动调整导航栏大小

qq_那就好_2 2017-06-26 04:30:02
以前是文字,我改成图片后,出现logo(图片)与导航栏重合到一起!如果是文字状态的话正常!请问大神这是怎么一回事?代码如下:<!DOCTYPE html><html><head><!-- title and meta --><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><meta name="description" content="" /><title>根据滚动自动调整导航栏大小 - 站长素材</title>    <!-- css --><link rel="stylesheet" href="css/style.css" />    <!-- js --><script src="js/classie.js"></script><script>    function init() {        window.addEventListener('scroll', function(e){            var distanceY = window.pageYOffset || document.documentElement.scrollTop,                shrinkOn = 300,                header = document.querySelector("header");            if (distanceY > shrinkOn) {                classie.add(header,"smaller");            } else {                if (classie.has(header,"smaller")) {                    classie.remove(header,"smaller");                }            }        });    }    window.onload = init();</script></head><body><div id="wrapper"><header>    <div class="container clearfix">        <h1 id="logo"><img src="img/logo.png" width="227" height="77" alt=""/></h1>        <nav>            <a href="">首页</a>            <a href="">博林工作室</a>            <a href="">Dolor</a>        </nav>    </div></header><!-- /header --><div id="main">    <div id="content">        <section>            <div>                <h1>新闻资讯</h1>                <p>天寒地</p>                <p>男人下班后出去鬼混</p>                           </div>        </section>        <section>            <div>                <h1>物业电梯</h1>               <p>天寒地冻</p>                <p>男人</p>            </div>        </section>        <section>            <div>                <h1>电梯的故事</h1>                <p>天寒地冻,</p>                <p>男人下班后出</p>            </div>        </section>        <section>            <div>                <h1>好久不见</h1>               <p>天寒地冻</p>                <p>男人下班</p>            </div>        </section>        <section>            <div>                <h1>你在干什么?</h1>                <p>天寒地冻</p>                <p>男人下班后出去鬼混</p>            </div>        </section>    </div></div><!-- #main --><footer></footer><!-- /footer --></div><!-- /#wrapper --></body></html>CSS代码如下html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {   background: transparent;   border: 0;   margin: 0;   padding: 0;   vertical-align: baseline; } body {   line-height: 1; } h1, h2, h3, h4, h5, h6 {   clear: both;   font-weight: normal; } ol, ul {   list-style: none; } blockquote {   quotes: none; } blockquote:before, blockquote:after {   content: '';   content: none; } del {   text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table {   border-collapse: collapse;   border-spacing: 0; } a img {   border: none; } /* =Scss Variables -------------------------------------------------------------- */ /* =Global -------------------------------------------------------------- */ *, *:before, *:after {   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } body {   background-color: #3cb5f9;   color: #505050;   font-family: "Ubuntu", sans-serif;   font-weight: 300;   font-size: 16px;   line-height: 1.8; } /* Headings */ h1, h2, h3, h4, h5, h6 {   line-height: 1;   font-weight: 300; } a {   text-decoration: none;   color: #3cb5f9; } a:hover {   color: #0793e2; } /* =Template -------------------------------------------------------------- */ #wrapper {   width: 100%;   margin: 0 auto; } #main {   background-color: #fff;   padding-top: 150px; } .container {   width: 100%;   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: #3cb5f9;     color: white; } /* =Info Bar -------------------------------------------------------------- */ #info-bar {   background-color: #3cb5f9; }   #info-bar a {     color: white;     font-size: 14px;     text-transform: uppercase;     display: inline-block;     margin: 0;     padding: 10px; }     #info-bar a:hover {       background-color: #0793e2; }   #info-bar span.all-tutorials,   #info-bar span.back-to-tutorial {     display: block;     width: 50%; }   #info-bar span.all-tutorials {     float: left;     text-align: left; }   #info-bar span.back-to-tutorial {     float: right;     text-align: right; } /* =Header -------------------------------------------------------------- */ header {   width: 100%;   height: 150px;   overflow: hidden;   position: fixed;   top: 0;   left: 0;   z-index: 999;   background-color: #0683c9;   -webkit-transition: height 0.3s;   -moz-transition: height 0.3s;   -ms-transition: height 0.3s;   -o-transition: height 0.3s;   transition: height 0.3s; }   header h1#logo {     display: inline-block;     height: 150px;   width: 300px;     line-height: 100px;     float: left;     -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: #9fdbfc;       font-weight: 700;       font-size: 18px;       -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: white; }   header.smaller {     height: 75px; }     header.smaller h1#logo {       width: 150px;       height: 75px;       line-height: 75px;       font-size: 30px; }     header.smaller nav a {       line-height: 75px; } /* =Footer -------------------------------------------------------------- */ /* =Extras -------------------------------------------------------------- */ .clearfix:after {   visibility: hidden;   display: block;   content: "";   clear: both;   height: 0; } /* =Media Queries -------------------------------------------------------------- */ @media all and (max-width: 660px) {   /* =Header   -------------------------------------------------------------- */   header h1#logo {     display: block;     float: none;     margin: 0 auto;     height: 100px;     line-height: 100px;     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; }     header.smaller nav {       height: 35px; }       header.smaller nav a {         line-height: 35px; } } @media all and (max-width: 600px) {   .container {     width: 100%; }   #info-bar a {     display: block; }   #info-bar span.all-tutorials,   #info-bar span.back-to-tutorial {     width: 100%; }   #info-bar span.all-tutorials,   #info-bar span.back-to-tutorial {     float: none;     text-align: center; }   #info-bar span.all-tutorials {     border-bottom: solid 1px #0793e2; } }                    JS代码如下            ( function( window ) { 'use strict'; // class helper functions from bonzo https://github.com/ded/bonzo function classReg( className ) {   return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } // classList support for class management // altho to be fair, the api sucks because it won't accept multiple classes at once var hasClass, addClass, removeClass; if ( 'classList' in document.documentElement ) {   hasClass = function( elem, c ) {     return elem.classList.contains( c );   };   addClass = function( elem, c ) {     elem.classList.add( c );   };   removeClass = function( elem, c ) {     elem.classList.remove( c );   }; } else {   hasClass = function( elem, c ) {     return classReg( c ).test( elem.className );   };   addClass = function( elem, c ) {     if ( !hasClass( elem, c ) ) {       elem.className = elem.className + ' ' + c;     }   };   removeClass = function( elem, c ) {     elem.className = elem.className.replace( classReg( c ), ' ' );   }; } function toggleClass( elem, c ) {   var fn = hasClass( elem, c ) ? removeClass : addClass;   fn( elem, c ); } var classie = {   // full names   hasClass: hasClass,   addClass: addClass,   removeClass: removeClass,   toggleClass: toggleClass,   // short names   has: hasClass,   add: addClass,   remove: removeClass,   toggle: toggleClass }; // transport if ( typeof define === 'function' && define.amd ) {   // AMD   define( classie ); } else {   // browser global   window.classie = classie; } })( window );
查看完整描述

1 回答

  • 1 回答
  • 0 关注
  • 1930 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信