Я использую обтравочные контуры, чтобы изменить цвет моего логотипа на цвет фона.
В дополнение к этому логотип прокручивается сверху вниз в зависимости от вертикального положения пользователя на странице. Верхняя часть страницы = логотип сверху, нижняя часть страницы = логотип снизу и т.д.
К сожалению, когда я добавил обтравочные контуры, логотипы потеряли свое положение прокрутки и после первого не работают вообще.
Это можно обойти? Кроме того, с самого начала положение логотипа было немного неправильным, поэтому есть ли возможность решить эту проблему одновременно.
Вы можете увидеть оригинальный вопрос здесь: положение дел на основе позиции прокрутки
Я пробовал это, но я не могу заставить его работать.
Положение прокрутки потеряно при скрытии div
Я использую Расширенные пользовательские поля, и каждый раздел PHP файла содержит это в заголовке как часть обтравочного контура, используя соответственно белую или темную версию логотипа. Его родитель позиционируется относительно, а его ребенок абсолютно.
div class="logo-scroll">
<div class="scroll-text">
<a href="/home"><img width="53px" height="260px" src="/wp-content/uploads/2019/07/sheree-walker-web-design-edinburgh-vertical-01.svg"/></a>
</div>
</div>
Javascript
const docHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
const logo = document.querySelector('.scroll-text');
const logoHeight = logo.offsetHeight;
// to get the pseudoelement '#page::before' top we use getComputedStyle method
const barTopMargin = parseInt(getComputedStyle(document.querySelector('#page'), '::before').top);
let viewportHeight, barHeight, maxScrollDist, currentScrollPos, scrollFraction;
logo.style.top = barTopMargin + 'px';
window.addEventListener('load', update);
window.addEventListener('resize', setSizes);
document.addEventListener('scroll', update);
setSizes();
function update() {
currentScrollPos = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
scrollFraction = currentScrollPos / (docHeight - viewportHeight);
logo.style.top = barTopMargin + (scrollFraction * maxScrollDist) + 'px';
}
function setSizes() {
viewportHeight = window.innerHeight;
// to get the pseudoelement '#page::before' height we use getComputedStyle method
barHeight = parseInt(getComputedStyle(document.querySelector('#page'), '::before').height);
maxScrollDist = barHeight - logoHeight;
update();
}
CSS
.logo-scroll .scroll-text img {
padding: 0 6px 0 17px;
}
#page::before {
content: "";
position: fixed;
top: 30px;
bottom: 30px;
left: 30px;
right: 30px;
border: 2px solid white;
pointer-events: none;
-webkit-transition: all 2s; /* Safari prior 6.1 */
transition: all 2s;
}
.logo-scroll {
position: fixed;
left: 30px;
top: 30px;
bottom: 30px;
border-right: 2px solid white;
width: 75px;
z-index: 10;
}
.scroll-text {
position: fixed;
}