Определить какой фон под div на jquery

#javascript #jquery #header #background

Как определить какой фон под нашим фиксированным div (лучше, если это будет на jquery)?

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

Обновление

Пример – www.designbyface.com/ (черная иконка справа вверху). Когда скролим – на
темном фоне должна становиться белой, ведь так ее не видно, нечитабельна. 

Слева так же должно быть размещено фиксированное лого в png, а при скроле будет меняться
png с черной картинки на белую и наоборот. Это только пример, а сайт - динамический,
страницы разные.
    

Ответы

Ответ 1

Прямо под логотипом - вряд-ли, а получить цвета рядом, кажется, можно.

Решение:


Есть проект html2canvas - с его помощью можно сделать canvas-копию куска страницы.
Нас интересует кусок - верхние 100px. Делаем js-ом "скриншот" в canvas.
Есть способ получить данные об RGB-представлении куска canvas - getImageData(). Вы
знаете отступы логотипа сверху и справа от границы окна, вычленяете эту область.
Анализируете цвета в выделенной области выше, ниже, слева, справа от логотипа и сравниваете
с цветом посередине логотипа.
По результатам сравнения (например, 3 или 4 совпавших с центром контрольных точек)
меняете логотип на инвертированную версию.


P.S: Определить под логотипом цвет светлее или темнее - можно

В теории, можно логотип сделать частично прозрачным, к нему будет примешиваться цвет
фона, затем смотреть изменение цвета центрального пикселя - стал он темнее эталона
или светлее. Или даже на страницу его добавлять с помощью canvas и drawImage(), что
позволит избежать использования библиотеки html2canvas.


Ответ 2

Есть вариант без математики и геометрии.
Менять картинку js-кой каждую долю секунды.
Только надо довольно маленький период чтобы глазу было незаметно.
Либо у картинки сделать кромку.

На мой взгляд такие мелочи не должны иметь сложных решений.


Ответ 3

Можете воспользоваться document.elementFromPoint(). Пример:
https://preview.c9users.io/dmvw34/logorecalc/logo.html