html - 使用图像转换导航栏

Question

我有一个导航栏，当您向下滚动页面时它会改变位置，但我无法将图像与其内联。

我一插入图片，文本就改变了位置。我见过的最好的例子是 boosted board 网站。 https://boostedboards.com/ .我对所有这些都不熟悉，所以任何使它看起来像示例的提示都会有所帮助。

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

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

header {
  vertical-align: middle;
  width: 80%;
  height: 100px;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 180px;
  z-index: 999;
  background-color: #F7F7F7;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  -ms-transition: height 0.3s;
  -o-transition: height 0.3s;
  transition: height 0.3s;
  display: inline-block;
  -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 {
  vertical-align: middle;
  display: inline-block;
  float: right;
  z-index: 999999999;
  padding: 0.75em 0 1 1;
  margin: 0 auto;
  Padding: 0;
  height: 60px;
  padding-right: 280px;
}

header nav a {
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  line-height: 90px;
  margin-left: 20px;
  color: #1B1A1A;
  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;
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
  padding-left: 20px;
}

header nav a:hover {
  opacity: 0.5;
}

header.smaller {
  height: 75px;
  left: 0px;
  width: 100%;
  -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.smaller nav a {
  line-height: 75px;
}

<header>
  <div class="container clearfix">
    <nav>
      <img src="logo.png" alt="left" width="75" class="logo">
      <a href="Index.html">Home</a>
      <a href="About Us.html">About Us</a>
      <a href="Gallery.html">Gallery</a>
      <a href="#">Contact</a>
      <a src="../Proper website/Logo.png" width="75"></a>

    </nav>
  </div>
</header>

Answer 1

首先，我不知道你对 HTML 和 CSS 到底了解多少，但是你有一些代码行看起来非常非常奇怪，比如这个:

<a src="../Proper website/Logo.png" width="75"></a>

我认为您想在此处添加图片，但您没有添加带有 <a> 的图片标签。这是添加图像的代码:

<img src="../Proper website/Logo.png" width="75"/>

如果我看一下您的代码，我认为您对 Web 开发和 Web 创建知之甚少，但是在尝试使用 Javascript 和此类东西进行高级效果之前，我真的应该看看基础知识。