1

Есть фиксированная шапка. При прокручивании сайта лого должно применять цвет фона, на котором оно находится. Как можно сие реализовать без участия фотошопа с заранее продырявленным хедером в форме лого?

3 ответа 3

1

Как вариант, сделать за лого див с изменяющимся фоном в высоту, будь то картинка, градиент, что бы ни было. Размеры, позицию и координаты задать как у лого, overflow: hidden. И затем, при прокрутке страницы прокручивать его JS'oм. Немного индийский вариант, но шанс на жизнь в контексте предложения, думаю имеет.

1

Предлагаю определять цвет блока, который сейчас находится сверху и при помощи SVG-свойства fill менять цвет логотипа в соответствии с определенным цветом. Если ваш логотип не в SVG-формате, то его надо будет вставить в блок <svg></svg как <image xlink:href="">.

var blockHeight = [],
  blockColor = [],
  blockTop = [],
  $svgPaths = $('svg path');

$(window).scroll(function() {
  blockArr = getBlocks();

  for (var i = 0; i < blockTop.length; i++) {

    if (blockTop[i] <= 0 && -blockTop[i] <= blockHeight[i]) {
      $svgPaths.css('fill', blockColor[i]);
    }
  }
});

function getBlocks() {
  $('.block').each(function(index) {
    blockHeight[index] = $(this).outerHeight();
    blockTop[index] = this.getBoundingClientRect().top;
    blockColor[index] = $(this).css('background-color');
  });
}
* {
  margin: 0;
  padding: 0;
}
.container {
  height: 1500px;
}
.container header {
  position: fixed;
  width: 100%;
  padding: 15px;
  background-color: #fff;
}
.block {
  height: 200px;
}
.block--red {
  background-color: red;
}
.block--green {
  background-color: green;
}
.block--yellow {
  background-color: yellow;
}
.block--blue {
  background-color: blue;
}
svg {
  width: 100px;
  margin: 0 auto;
  display: block;
}
svg path {
  fill: #239fff;
}
svg path.dot {
  fill: #f8db1e;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <header>
    <svg version="1.1" x="0px" y="0px" viewBox="0 190 250 80" xml:space="preserve">
      <path class="letter" d="M17,231.7l10.7-13c0.8-0.9,0.3-2-0.8-2h-8c-0.8,0-1.5,0.3-2.2,1.1l-7.3,9.3v-8.7c0-1.2-0.6-1.7-1.7-1.7H1.7 c-1.1,0-1.7,0.6-1.7,1.7v30c0,1.2,0.6,1.7,1.7,1.7h5.9c1.1,0,1.7-0.6,1.7-1.7v-11.6l9.8,12.2c0.6,0.7,1.1,1.2,2,1.2h8.3 c1.1,0,1.5-1.2,0.9-1.9L17,231.7z"></path>
      <path class="letter" d="M181.4,216.8h-24.9c-0.8,0-1.4,0.6-1.4,1.4v6.5c0,0.8,0.6,1.4,1.4,1.4h7.9v22.7c0,0.8,0.6,1.4,1.4,1.4h6.5 c0.8,0,1.4-0.6,1.4-1.4v-22.7h7.8c0.8,0,1.4-0.6,1.4-1.4v-6.5C182.8,217.4,182.2,216.8,181.4,216.8"></path>
      <path class="letter" d="M107.7,242.7h-8v-6.3h8C112.6,236.5,113,242.7,107.7,242.7 M99.7,224.2h6c3.9,0,3.9,5.2,0,5.2h-6V224.2z  M114.9,232c5.9-5.7,2-15.2-7.1-15.2H92.1c-0.8,0-1.4,0.6-1.4,1.4v30.6c0,0.8,0.6,1.4,1.4,1.4h17.1 C121.2,250.2,124.3,236.5,114.9,232"></path>
      <path class="letter" d="M83.3,218.2c0-0.8-0.6-1.4-1.4-1.4h-7.4c-0.8,0-1.4,0.6-1.4,1.4v30.6c0,0.8,0.6,1.4,1.4,1.4h7.4 c0.8,0,1.4-0.6,1.4-1.4V218.2z"></path>
      <path class="letter" d="M232.5,232.1h-5v-7.7h4.9c3.3,0,4.4,1.5,4.4,3.8C236.8,230.2,235.9,232.1,232.5,232.1 M233.2,216.8h-13.6 c-0.8,0-1.4,0.6-1.4,1.4v30.6c0,0.8,0.6,1.4,1.4,1.4h6.5c0.8,0,1.4-0.6,1.4-1.4v-9h5.3c7.5,0,13.2-4,13.2-11.4 C246,221.3,240.1,216.8,233.2,216.8"></path>
      <path class="letter" d="M193.8,237.1l3.7-11l3.7,11H193.8z M215.1,248.6L203.7,218c-0.3-0.8-0.9-1.3-1.9-1.3h-8.6c-1,0-1.6,0.5-1.9,1.3 l-11.4,30.5c-0.3,0.9,0.2,1.7,1.1,1.7h7.3c0.6,0,1.2-0.5,1.4-1l1.5-4.5h12.6l1.5,4.5c0.2,0.6,0.8,1,1.4,1h7.3 C214.9,250.2,215.4,249.5,215.1,248.6"></path>
      <path class="letter" d="M65.9,248.8v-30.6c0-0.8-0.6-1.4-1.4-1.4h-7.1c-0.6,0-1,0.3-1.3,0.7l-13.2,17.9l0-17.2c0-0.8-0.6-1.4-1.4-1.4 H35c-0.8,0-1.4,0.6-1.4,1.4v30.6c0,0.8,0.6,1.4,1.4,1.4h7.1c0.6,0,1-0.3,1.3-0.7l13.2-17.9l0,17.2c0,0.8,0.6,1.4,1.4,1.4h6.5  C65.3,250.2,65.9,249.6,65.9,248.8L65.9,248.8z"></path>
      <path class="letter" d="M152.9,243.9l-3.8-4.1l0,0c-0.3-0.3-0.7-0.5-1.1-0.5c-0.4,0-0.7,0.2-1,0.4c-3.3,2.6-5.9,2.8-7.5,2.8 c-4.9,0-8.9-4-8.9-9c0-4.9,4-9,8.9-9c1.6,0,4.2,0.2,7.5,2.8c0.3,0.2,0.6,0.4,1,0.4c0.4,0,0.8-0.2,1.1-0.5h0l3.8-4.1v0 c0.2-0.3,0.4-0.6,0.4-1c0-0.4-0.2-0.8-0.4-1c-4.3-3.9-8.3-5.5-13.3-5.5c-9.8,0-17.8,7.9-17.8,17.8c0,9.9,8,17.9,17.8,17.9 c5,0,9-1.5,13.3-5.4v0c0.3-0.3,0.4-0.6,0.4-1C153.3,244.5,153.1,244.2,152.9,243.9L152.9,243.9z"></path>
      <path class="dot" d="M75.7,203.5c0,4.7-3.8,8.5-8.4,8.5c-4.6,0-8.4-3.8-8.4-8.5c0-4.7,3.8-8.5,8.4-8.5C72,195,75.7,198.8,75.7,203.5"></path>
      <path class="dot" d="M97.5,203.5c0,4.7-3.8,8.5-8.4,8.5c-4.6,0-8.4-3.8-8.4-8.5c0-4.7,3.8-8.5,8.4-8.5 C93.8,195,97.5,198.8,97.5,203.5"></path>
    </svg>
  </header>

  <div class="block block--red"></div>
  <div class="block block--blue"></div>
  <div class="block block--green"></div>
  <div class="block block--yellow"></div>
</div>

0

Пожалуй «дырявый логотип» это самый простой вариант. Остальные варианты попахивают теми ещё извращениями:

Если цвета фона постоянны (не зависят от контента) то можно вручную сопоставить нужные цвета с соответствующими значениями window.pageYOffset например.

Или определять какой элемент находится в нужной части экрана (не подскажу как именно это делать) и считывать его background-color.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.