How to change logo color on scroll and on hover

Question

Need to change the logo color on hover, than change it on scroll.

I got it to change on hover, but having trouble changing it on scroll. Can someone please look at my JSFiddle and help?

Maybe it's just the classes that are clashing or my JS logic, maybe I need to step off and let my brain refresh.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

  <style>
    .newROInav {
        padding: 40px;
        width: 100%;
        transition-duration: 0.5s;
        transition-timing-function: ease-in-out;
    }

    .newROInav:hover {
        background-color: white;
    }

    .light {
      display: block;
    }
    .dark {
      display: none;
    }
    .newROInav:hover div[class="dark"] {
      display: block;
    }
    .newROInav:hover div[class="light"] {
      display: none;
    }


    $color-darkgreen: #006072;

    html,
    body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 16px;
        padding: 0;
        margin: 0;
        width: 100vw;
        height: 1000vw;
    }

    body p {
        padding: 40px;
    }

    .sticky-top {
        position: sticky;
        top: 0px;
        z-index: 1020;
    }

    ul,
    li {
        padding: 0;
        margin: 0;
    }

    main {
        transition: background-color 0.3s ease;
        background-color: $color-darkgreen;
        margin: 0;
        padding: 0;
        position: fixed;
        text-align: center;
        top: 0;
        width: 100vw;

        ul {
            width: 100%;
            height: 100%;
            position: relative;
            padding: 30px;

            li {
                display: inline;
                top: 50%;
                padding: 2rem;

                a {
                    color: #fff;
                }
            }
        }

        &.inverted {
            background-color: #fff;
            box-shadow: 0 3px 5px 0.3px rgba(0, 0, 0, 0.1);

            a {
                color: $color-darkgreen;
            }
        }

    }
</style>

<main class="newROInav sticky-top">
  <div class="test">
    <div class="dark">
      <ul>
        <li><a href="#"><img src="http://newnavstg.wpengine.com/wp-content/uploads/logo-dark.svg" /></a></li>
      </ul>
    </div>
    <div class="light">
      <ul>
        <li><a href="#"><img src="http://newnavstg.wpengine.com/wp-content/uploads/logo.svg" /></a></li>
      </ul>
    </div>
  </div>
</main>
<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa reiciendis quas, optio ullam debitis adipisci et
  voluptates tenetur? Dolor ea optio aspernatur? Aspernatur, omnis ea consequuntur cum quod asperiores veniam.
</p>

<script>
  var className = "inverted";
  var scrollTrigger = 60;

  window.onscroll = function() {
  // We add pageYOffset for compatibility with IE.
  if (window.scrollY >= scrollTrigger || window.pageYOffset >= scrollTrigger) {
      document.getElementsByTagName("main")[0].classList.add(className);
  } else {
      document.getElementsByTagName("main")[0].classList.remove(className);
  }
  };
</script>

How to change logo color on scroll and on hover

0 Answers0