Есть фиксированная шапка. При прокручивании сайта лого должно применять цвет фона, на котором оно находится. Как можно сие реализовать без участия фотошопа с заранее продырявленным хедером в форме лого?
3 ответа
Как вариант, сделать за лого див с изменяющимся фоном в высоту, будь то картинка, градиент, что бы ни было. Размеры, позицию и координаты задать как у лого, overflow: hidden
. И затем, при прокрутке страницы прокручивать его JS'oм. Немного индийский вариант, но шанс на жизнь в контексте предложения, думаю имеет.
Предлагаю определять цвет блока, который сейчас находится сверху и при помощи 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>
Пожалуй «дырявый логотип» это самый простой вариант. Остальные варианты попахивают теми ещё извращениями:
Если цвета фона постоянны (не зависят от контента) то можно вручную сопоставить нужные цвета с соответствующими значениями window.pageYOffset
например.
Или определять какой элемент находится в нужной части экрана (не подскажу как именно это делать) и считывать его background-color
.