Как элементу с position:fixed прикрепеть background-color который находится за ним в текщий момент?

Question

На сайте находится блок, у коготоро position:fixed. Это svg картинка у которой fill:#fff. Этот блок закреплён внизу экрана (окошко при нажатии которого появляется окно обратной связи). На сайте имеется много блоков разной высоты и при изменении размера экрана, высота блоков тоже изменяется. Блоки синего и белого цвета. Нужно сделать так, чтобы как только окошко появлялось на белом фоне, оно становилось синим и наоборот. Пробовал mix-blend-mode difference, но так не пойдёт, ибо при прохождении текста или какой-нибудь картинки, она тоже видна за этой кнопке в странных цветах. Пробовал прикрепить к ивенту scroll, но из-за разных размеров блока, это становится не рационально. Поэтому к координатам тоже не привязать. Остаётся только как-то привязать к background фона на котором он находится, но как это сделать? Ведь блок находится в самом начале body и там закреплён, и даже если я спущусь на сайте в самый низ, у этого окошка все равно родитель body. Может есть какие-то ещё варианты, но я не знаю и буду очень благодарен если кто-то сможет помочь, или хотя бы скинуть сайт, на котором имеется такая же функция (чтобы посмотреть чужой код и попробовать сделать так же).

Answer 1

Вы написали что ,пробовали уже через event scroll , но из-за блоков разных размеров сочли нерациональным. Очень интересно почему вы так подумали. Я могу предложить следующий код , но он через event scroll.

let svg = document.querySelector('svg');
let bgElems = document.querySelectorAll('.background');
window.addEventListener('scroll',function(){
    topCords = svg.getBoundingClientRect().y+this.pageYOffset;
    for(let i=bgElems.length-1;i>=0;i--){
      
      if(topCords>=bgElems[i].offsetTop){
        if(bgElems[i].dataset.color=="white"){
          svg.style.fill = "blue"
        }else{
          svg.style.fill = "white"
  
        }
        break;
      }
    }

});

body{
  margin:0;
  padding:0;
}
.block1{
  height:500px;
  background-color:blue;
}
.block2{
  height:300px;
  background-color:white;
}
.block3{
  height:700px;
  background-color:blue;
}
.block4{
  height:500px;
  background-color:white;
}
svg{
  position:fixed;
  fill:white;
  transition:fill 50ms;
  bottom:0;right:0;
}

<div data-color="blue" class="background block1">
  
</div>
<div data-color="white" class="background block2">
  
</div>
<div data-color="blue" class="background block3">
  
</div>
<div data-color="white" class="background block4">
  
</div>
 <svg height="100" width="100" >
       <circle cx="50" cy="50" r="50"/>
 </svg>

БЛОГ НА HUSL

Как элементу с position:fixed прикрепеть background-color который находится за ним в текщий момент?

Ответы (1 шт):