使用图像

Question

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

插入图像后，文本会立即改变位置。我见过的最好的例子是增强的董事会网站。 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"/>

我认为你不太了解网页开发和网页创建，如果我查看你的代码，但在尝试使用 Javascript 和这类东西进行高级效果之前，我应该真正看看基础知识。