Как найти библиотеку для смены цвета в зависимости от блока?

Question

[Shuboanator]

Не могу найти библиотеку что бы "бургер" меню и логотип меняли цвет в зависимости от какого бло

Comments

[Ivan Bogachev]

В зависимости от какого блока? Что вы имеете в виду?

[Shuboanator]

Ivan Bogachev, ну ,напирмер , скролишь и на черном фоне "бургер" белый. Листаешь дальше и уже на белом фоне он черный. Надеюсь понятно)

[Денис Васильев]

Shuboanator, Ну если именно только с черным и белым фоном. Бургер нужно покрасить в белый и задать ему: `mix-blend-mode: difference;`
https://codepen.io/corvus-007/pen/wZvOLZ

Answer 1

[KononovD]

Определите в каком блоке какого цвета у вас должны быть элементы, положите эти цвета в классы в css, отмеряйте расстояние от верха страницы: (offsetTop) и когда вам нужно, когда скролл достигнет какой-то высоты - добавляете нужным элементам этот класс) зачем вам библиотека? jq совсем уже убил желание думать?) (не в обиду)
на нативном js такая функция пишется в x*2 +n строчек кода, где x - количество ваших блоков, а n - количество элементов, которым надо классы добавлять)
формулу придумал только что, она может быть слегка неточная)))

Comments

[Shuboanator]

На динамическом сайте это сделать проблематично)

[Талян]

Shuboanator,

я вообще не понял в чем сложность

[KononovD]

Анатолий,
q:

В зависимости от какого блока? Что вы имеете в виду?

a:

ну ,напирмер , скролишь и на черном фоне "бургер" белый. Листаешь дальше и уже на белом фоне он черный. Надеюсь понятно)

[Талян]

KononovD, пипец ну написал бы автор, что "в зависимости от бэкграунда" а не от блока. Было бы понятно хотя бы, что и зачем.

Вот тут это уже 2 раза обсуждали Как можно сделать инверсию цвета логотипа относительно фона?

[KononovD]

Shuboanator, можно использовать всплытие событий), вешаем на обертки контента слушатели mousemove и touchstart, берем элемент на котором случилось это событие (e.target), вычисляем его родителя (element.parentElement) и кладем в переменную "родитель", дальше включается рекурсия (если "родитель".classList.contains("название класса враппера !!без точки!!") то, берем его задний фон("родитель".getComputedStyle.backgroundColor) и дальше в зависимости от значения цвета - корректируете цвет своего бургера
если же проверка на класс - ложная, т.е. у "родитель" нет нужного класса - пишем следующее:
"родитель" = "родитель".parentElement
и запускаем нашу функцию с параметром "родитель"

враппер.добавитьСлушательСобытия("маусмув", функцияОбработчик1)
враппер.добавитьСлушательСобытия("тачстарт", функцияОбработчик1)

function функцияОбработчик1(e){
родитель = e.target.parentElement
функцияОбработчик2(родитель)
}

function функцияОбработчик2(родитель){
    if(родитель.classList.contains("нужный класс"){
        цветБекграунда = родитель.getComputedStyle.backgroundColor
        switch(цветБекграунда){
            case: "rgb(0,0,0)"
                бургер.classList.add("blackColor")
                break;
            case:"rgb(255,255,255)"
                бургер.classList.add("whiteColor")
                бургер.classList.remove("blackColor")
                break;
        }
    } else{
        функцияОбработчик2(родитель.parentElement)
    }
}

+ ко всему класс "blackColor" должен быть ниже в css, что бы когда они есть оба - blackColor доминировал
можно там нагородить проверок на .contains(blackColor) и .contains(whiteColor), и просто удалять один и добавлять другой, но я не стал запариваться))

[KononovD]

поправка:
parentElement даст null, если мы у body его вызвать
поэтому там еще проверку надо дописать, на не null

parentNode в том же случае вернет document, а не null, но у document нет смысла брать цвет и что-то с ним делать

так что проверки на всякие null и contains - напишите сами)

[KononovD]

поправка2:
е.таргет может быть именно тем элементом, который нам нужен, так что туда так же надо дописать проверку на contains

этот способ очень мудреный, но я так придумал))

[KononovD]

поправка3:
можно сделать

враппер.добавитьСлушательСобытия("маусмув", функцияОбработчик1, {once:true})
враппер.добавитьСлушательСобытия("тачстарт", функцияОбработчик1, {once:true})

а потом в второй функции дописать после свитча:

setTimeout(()=>{
враппер.добавитьСлушательСобытия("маусмув", функцияОбработчик1, {once:true})
враппер.добавитьСлушательСобытия("тачстарт", функцияОбработчик1, {once:true})
},400)

что бы не сильно грузить браузер