Targeting div color at different page locations

Question

I have a site with back/next buttons fixed on the right and left side of the page. They are a single colour icon. Problem is they overlay both black and white images as the page scrolls. Can an 'anchor' or something similar be set so when the page reaches it (similar to how 'sticky' objects work I guess) I can change color of the div?

html (Wordpress)

...

<div><?php bnNav_content_nav( 'nav-below' ); ?></div> //puts the back/next buttons on the page

css

 [class*="navigation"] .nav-previous a,
 [class*="navigation"] .nav-next a {
   position: fixed;
   z-index: 999; 
   color: #fff;
  }

I understand my code is complicated to understand but essentially the output is

post images ...

'anchor' to change the .nav color

post content...

<nav>
  <nav id="nav-next"> ... </div>
  <nav id="nav-previous"> ... </div>
</nav>

EDIT: The nav overlays images then the content is on a white background. I want the nav to be white when its over the images then when it hits the content turn black. So basically set up a spot where it will change

prob is its all handled through the functions.php and wordpress. I essentially tried to show a simple example. Just wondering how to go about doing it if possible — user3550879, May 08 '16 at 11:56
would be better if you posted output screenshot and highlighted error — wui, May 08 '16 at 12:48

metarmask · Accepted Answer · 2016-05-08T12:10:37.267

You can use JavaScript to iterate through all elements but the nav and check which elements intersect and then put attributes on the elements the nav will intersect with the color you want the nav text to be and then update the color on every scroll event.

var nav = document.querySelector("nav");
var navRect = nav.getBoundingClientRect();
function checkNavColor() {
  var allButNav = document.querySelectorAll(":not(nav)");
  for (var i = 0; i < allButNav.length; i++) {
    var rect1 = allButNav[i].getBoundingClientRect();
    var rect2 = navRect;
    // By Buu Nguyen (http://stackoverflow.com/a/12067046/4245061)
    if (!(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom)) {
      nav.style.color = allButNav[i].getAttribute("data-navcolor");
    }
  }
}
window.addEventListener("scroll", checkNavColor);
checkNavColor();

body {
  height: 200vh;
}

nav {
  position: fixed;
}
div {
  height: 200px;
}
div:first-child {
  background: black;
}
div:nth-child(2) {
  background: white;
}
div:last-child {
  background: black;
}

<nav>Text which changes color</nav>
<main>
  <div data-navcolor="white"></div>
  <div data-navcolor="black"></div>
  <div data-navcolor="white"></div>
</main>

It is a really bad solution if you have more than a couple of elements like in the snippet and also uses HTML for non-semantic content.

If you want the text to be visible no matter the background you can add a shadow with the opposite color of the text:

body {
  height: 200vh;
}

nav {
  position: fixed;
  /* Add the smallest possible shadow in all directions */
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}
div {
  height: 200px;
}
div:first-child {
  background: black;
}
div:nth-child(2) {
  background: white;
}
div:last-child {
  background: black;
}

<nav>Text which has a shadow of the opposite color</nav>
<main>
  <div></div>
  <div></div>
  <div></div>
</main>

the first solution works good but as you said I don't have control over what is behind the nav element. I will update my question with perhapse an easier scenario. THere really is only one 'spot' where I want the nav to switch to the opposite color — user3550879, May 08 '16 at 20:55

Targeting div color at different page locations

1 Answers1