猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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

以前是文字，我改成图片后，出现logo（图片）与导航栏重合到一起！如果是文字状态的话正常！请问大神这是怎么一回事？


http://img.mukewang.com/59501c4a00011d6704090692.jpg


http://img.mukewang.com/59501c4c0001f10204040619.jpg

http://img.mukewang.com/59501c4c0001d5a006200913.jpg

http://img.mukewang.com/59501c650001bfe305640915.jpg


代码如下：

<!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 );


qq_那就好_2
浏览 1931回答 1
1回答
打开App，查看更多内容
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
Html5
JQuery