How to determine which background is under our fixed div (better if it is on jquery)?

In the header of the site there is a fixed logo. When scrolling, it should change from white to black, depending on the background that is under it when scrolling the pilgrim.

Update

Example - www.designbyface.com/ (black icon at the top right). When scrolled - on a dark background should become white, because it is not visible, unreadable.

On the left, the fixed logo in png should also be placed, and when scrolling, png will change from black to white and vice versa. This is just an example, and the site is dynamic, the pages are different.

  • Is there any example? "Under our" is under what? There are no seers here, and no one reads thoughts. Add the code by editing your question - Vasily Barbashev
  • What does it mean ΠΊΠ°ΠΊΠΎΠΉ Ρ„ΠΎΠ½ ? What color or picture? What does it mean under нашим фиксированным div ? Try to write more detailed questions with an example of what you have and what you want to get - Alexey Shimansky
  • And if half the icons on a black background, and half on white? - Grundy
  • it seems to me, it is more correct to calculate, let for each page, the number of pixels that need to be scrolled in order for the logo to change color. and dynamically connect the logo change function at the right time - lexxl
  • one
    maybe this option is suitable? aerolab.imtqy.com/midnight.js - soledar10

3 answers 3

Directly under the logo - hardly, and get the color next, it seems possible.

Decision:

  1. There is a html2canvas project - with its help you can make a canvas-copy of a piece of the page. We are interested in a piece - the top 100px. Make js-th "screenshot" on canvas.
  2. There is a way to get data about the RGB representation of a piece of canvas - getImageData () . You know the indentation of the logo at the top and right of the border of the window, isolate this area.
  3. Analyze the colors in the selected area above, below, to the left, to the right of the logo and compare with the color in the middle of the logo.
  4. According to the results of the comparison (for example, 3 or 4 control points that coincided with the center), change the logo to an inverted version.

PS: Determine the color under the logo is lighter or darker - you can

In theory, you can make the logo partially transparent, the background color will be mixed with it, then watch the color change of the central pixel - it becomes darker than the standard or lighter. Or even add it to the page using canvas and drawImage () , thus avoiding the use of the html2canvas library.

  • An unexpected decision for me, but can you do it? - WebsNata
  • @WebsNata, I think, yes, because individually these opportunities had to be used once. - Mi Ke Bu

There is an option without mathematics and geometry. Change the picture js-Coy every split second. Just need a fairly short period so that the eye was unnoticeable. Or make a picture of the edge.

In my opinion such trifles should not have difficult decisions.

  • I am able to change the picture, but it is exactly how to set if. Those. How to make an expression that would mean a light or dark background under the div when scrolling. The pages on the site are different, there are many of them, there is no possibility for everyone to write code. Those. The expression for automatics interests. - WebsNata
  • That is the problem of determining the background is interesting? - Skywave
  • Yeah, right. Do you know any methods? - WebsNata
  • Not. Unfortunately, did not come across this. I will support the previous speakers. =) - Skywave

You can use document.elementFromPoint (). Example: https://preview.c9users.io/dmvw34/logorecalc/logo.html