0

I've been going insane trying to get this to work:

<script>
      window.onload = function() {myFunction()};
      window.onscroll = function() {myFunction()};
      function myFunction() {
      const top1 = document.getElementById("big-landing");
      let y1=top1.scrollTop;
      const top2 = document.getElementById("cbt-1");
      let y2=top2.scrollTop;
      const top3 = document.getElementById("cbt-2");
      let y3=top3.scrollTop;
      if ( document.documentElement.scrollTop >= y1 && document.documentElement.scrollTop < y2)) {
      document.getElementById("logo").src = "/assets/logo-no-type-inv.svg";
      $(".menu-circle").css("background-color", "black");
      $(".menu-overlay a").css("color", "white");
      if($(".dynamic-header-text").css("color") === "black")
      $(".dynamic-header-text").css("color", "white");
      else $(".dynamic-header-text").css("color", "black");
      } else if (document.documentElement.scrollTop >= y2 && document.documentElement.scrollTop < y3){
      document.getElementById("logo").src = "/assets/logo-no-type.svg";
      $(".menu-circle").css("background-color", "#ffaa00");
      $(".menu-overlay a").css("color", "black");
      if($(".dynamic-header-text").css("color") ===  "white")
      $(".dynamic-header-text").css("color", "black");
      else $(".dynamic-header-text").css("color", "white");
      } else if (document.documentElement.scrollTop >= y3) {
      document.getElementById("logo").src = "/assets/logo-no-type-inv.svg";
      $(".menu-circle").css("background-color", "black");
      $(".menu-overlay a").css("color", "white");
      if($(".dynamic-header-text").css("color") === "black")
      $(".dynamic-header-text").css("color", "white");
      else $(".dynamic-header-text").css("color", "black"); 
          
      }
    }
      </script>

It's supposed to change the color of a fixed header and the insides of a. full screen menu. It only works when I compare "document.documentElement.scrollTop" against an actual value. (say 500). The header and menu change when reaching 500px of scroll. However this is useless for my purposes and any sort of responsive design. Please help :)

Basil M.
  • 1
  • 1

1 Answers1

0

scrollTop tells you how much a vertically-scrollable element has been scrolled:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

Instead, try something like this:

Finding element's position relative to the document

Geat
  • 1,169
  • 6
  • 17