0

So I´m working on a landing page (test site here: http://kingdomhousedev.cloudaccess.host/) that has a fixed pgn logo. Since it´s white and some of the background is also white it disapears over those sections.

So what I´m wanting to do is change the logo to black when it´s over white or light sections.

Can this be achived using javascript and css? I´ve searched and found some one example (like:http://www.kennethcachia.com/background-check/) but I want it to happen at scroll and not after. If possible it would be nice if it would be so that for example if only half the logo was over white only that part would be black.

Thanks in advance for the help!

Edit:

I was asked for an example not from a live site. So here is one: https://jsfiddle.net/57Legkq3/9/

HTML:

<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="logo"></div>

CSS:

.white{
  background-color:white;
  height: 400px;
}

.black{
  background-color:black;
  height: 400px;
}

.logo {
  width: 100px;
  height: 100px;
  width: 100px;
  height: 100px;
  background-color:white;
  position: fixed;
  top: 20px;
  left: 20px;
}


.white {
  background-color: white;
  height: 400px;
}

.black {
  background-color: black;
  height: 400px;
}

.logo {
  width: 100px;
  height: 100px;
  width: 100px;
  height: 100px;
  background-color: white;
  position: fixed;
  top: 20px;
  left: 20px;
}
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="logo"></div>

Also to clarify. I want the white box (representing the logo) to change color to black when going over the white areas. But without me knowing where the white areas are. So I need to check somehow what is under the logo and change color based on that, and preferably only the part of the logo that is over the white area.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
Oscar Thörn
  • 13
  • 5
  • 1
    related : https://stackoverflow.com/questions/51998529/simulate-change-of-color-when-div-overlays-another-div/52000110#52000110 it may give you ideas – Temani Afif Sep 01 '18 at 19:43
  • 1
    also this one : https://stackoverflow.com/questions/48998036/how-to-create-image-scrolling-blend-effect-with-css/48998170#48998170 – Temani Afif Sep 01 '18 at 19:44
  • There are actually a number of solutions available to this problem on stackoverflow. In a nutshell, you could use JS to check for the offset when scrolling; than based on the offset - apply CSS via JS function. – e.doroskevic Sep 01 '18 at 19:46
  • Please post your [mcve] code in your question; showing us the code in a live website means that as soon as the problem is resolved the problematic code is no longer available for others to see. – David Thomas Sep 01 '18 at 19:56
  • Thanks for the suggestions but they are not quite what I´m looking for. I understand using two images and moving one up based on how far the page is scrolled. But I want the color to change based on the background even if I do not know what color the background will be at any specific point. So it needs to check for the background ;) – Oscar Thörn Sep 01 '18 at 20:03

1 Answers1

0

Here is a basic idea using JQuery. The code below demonstrates the general principal you'd apply.

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 200) {
        $("body").addClass("blue");
    } else {
        $("body").removeClass("blue");
    }
});

Note in the above code sample, the scroll is a measurment indicating the windows top! Hence when scroll changes, appropriate class entries are added to, in this case, body element. Hope this helps.

e.doroskevic
  • 2,129
  • 18
  • 25
  • This is great, but I would like to do it automaticly. This seems to like it would need me to know where the sections are, while I want it to detect and decide for it self. – Oscar Thörn Sep 01 '18 at 19:56
  • In order to achieve this functionality, I see no other way but to check for the offsets. Hence, I will leave the above solution since it demonstrates the general principal. You'd probably find this post useful - [understanding offsets](https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively) – e.doroskevic Sep 01 '18 at 20:04