0

i'm wondering how to solve that problem: I have a react app containing this components: - topbar - content (itself contains different components: topic1.js, topic2.js...) - footer

The topbar is 'fixed', you can see it permanently at the top of the page (e.g. as it is here in stackoverflow.com). The different content-components have different background colors (let us assume a dark and a bright color). Now when i'm scrolling down the page, i'd like to change the color of the topbar depending on the current color behind it. E.g. the topbar is above an content component with a dark color, it should change its color to that dark one as well .. so it will fit perfect to the current content. I added two pictures to illustrate what i mean (image_bright & image_dark). you can see the topbar containing links to different topics and its matching perfectly to the background color. what's the easiest way to do that? The content components are on a complete different hierarchy level so i can not access them directly. Maybe its also relevant to mention that i'm using material-ui. Has anyone an idea?

Thanks for your help :)

faniac
  • 1
  • Does this answer your question? [Invert CSS font-color depending on background-color](https://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color) – Alexander Feb 01 '20 at 17:12
  • are all topics rendered at the same time or they're rendered in different pages? – Hao-Cher Hong Feb 01 '20 at 17:20
  • @Alexander: thank you for your response! i already found that link. looks interesting but as far as i understood that, it is not possible to directly access the color values of the background. The best case for me would be to recognize the color of the background and then change the color of topbar to exactly that color (and in addition change the font color inside the topbar to e.g. white for good reading). with mix-blend-mode it is only doing some image processing (convert color to the difference etc.. with some transparency and so on) directly to the topbar. Am i wrong with that assumption? – faniac Feb 01 '20 at 17:36
  • @Hao-CherHong Thank you very much for your quick response! The components (topics) are all rendered one after the other on one single page. – faniac Feb 01 '20 at 17:38
  • If it's on one page. You'll have to subscribe to document's onScroll event and figure out who's inside viewport at the moment, then setState to change the background color value. – Hao-Cher Hong Feb 02 '20 at 06:31
  • subscribe by using `window.addEventListener('scroll', yourHandler);`, then figure out where the topic components are by using [ref](https://reactjs.org/docs/refs-and-the-dom.html) to get the DOM references and [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) to get the positions. – Hao-Cher Hong Feb 02 '20 at 06:33
  • another option is to use [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) – Hao-Cher Hong Feb 02 '20 at 06:34
  • @Hao-CherHong: Okay, I'll see if it works. Thanks so far for your help. – faniac Feb 02 '20 at 08:38

0 Answers0