以前是文字，我改成圖片后，出現(xiàn)logo（圖片）與導(dǎo)航欄重合到一起！如果是文字狀態(tài)的話正常！請問大神這是怎么一回事？代碼如下：<!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>根據(jù)滾動自動調(diào)整導(dǎo)航欄大小 - 站長素材</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>物業(yè)電梯</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?);
添加回答
舉報(bào)
0/150
提交
取消