change svg color on different section-CodePudding

I want the hamburger menu to change color on different sections. I tried few things but - first attempt is working only while scrolling down and second attempt working on only first tow sections

<div >
  <svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve">
  <defs>
    <linearGradient id="black" x1="0%" y1="0%" x2="100%" y2="0%"  gradientTransform="rotate(90)">
      <stop offset="0%"   stop-color="#000"/>
      <stop offset="100%" stop-color="#000"/>
    </linearGradient>
    <linearGradient id="white" x1="0%" y1="0%" x2="100%" y2="0%"  gradientTransform="rotate(90)">
      <stop offset="0%"   stop-color="#fff"/>
      <stop offset="100%" stop-color="#fff"/>
    </linearGradient>
  </defs>
    <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/>
    </svg>
</div>
<section   data-id="dark">One</section>
<section  data-id="light">Two</section>
<section   data-id="dark">Three</section>
<section  data-id="light">Four</section>
<section   data-id="dark">Five</section>
<section  data-id="light">Six</section>
<section   data-id="dark">Seven</section>
<section  data-id="light">Eight</section>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  transition: background 1s ease-in-out;
}

.nav {
  position: fixed;
  width: 100;
  top: 0;
  left: 0;
  right: 0;
  rpadding: 24px 28px;
  padding: 2vh 28px;
  rpadding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 999;
}

svg {
  stroke: white;
  stroke-width: 3px;
}


/* svg.dark{
  stroke: black;
}
svg.light{
  stroke: white;
} */
.section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  color: #000;
  font-family: sans-serif;
  font-size: 72px;
  font-weight: 600;
  text-transform: uppercase;
  border:1px solid red;
}

[data-id = "dark"]{
  background:black;
  color:white;
}

JS attempt 1 ( codepen- https://codepen.io/tarunpatnayak/pen/rNYQpwL)

const mSections = document.querySelectorAll("section");

const Hsvg = document.querySelector("svg.burger");

// trial one

mOptions = {
  threshold: "0.9"
};

mObserver = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    console.log(e);
        // workin on scroll down
       // please un - comment svg.dark and svg.light to make this one work
    
    if (e.isIntersecting) {
      // console.log(e.target.getAttribute('data-id'));
      // Hsvg.classList.remove("light");

      if (e.target.getAttribute("data-id") !== "light") {
        Hsvg.classList.add("light");
      } else {
        Hsvg.classList.remove("light");
      }
      if (e.target.getAttribute("data-id") !== "dark") {
        Hsvg.classList.add("dark");
      } else {
        Hsvg.classList.remove("dark");
      }
    }
    
     });
}, mOptions);

mSections.forEach((mSection) => {
  mObserver.observe(mSection);
});

JS attempt 2 (codepen - https://codepen.io/tarunpatnayak/pen/JjOeMJJ )

const mSections = document.querySelectorAll("section");

const Hsvg = document.querySelector("svg.burger");

// trial one

mOptions = {
  threshold: "0.9"
};

mObserver = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    console.log(e);


      // workin on scroll down method - 2
        // please comment out svg.dark and svg.light to make this one work

        if (e.isIntersecting) {
          Hsvg.style.stroke = (e.target.classList.contains('light')) ? 'url(#black)' : 'url(#white)';
        }
        else {
          Hsvg.style.stroke = (e.target.classList.contains('dark')) ? 'url(#white)' : 'url(#black)';
        }
    
     });
}, mOptions);

mSections.forEach((mSection) => {
  mObserver.observe(mSection);
});

JS attempt 3 (jQuery)(codepen - https://codepen.io/tarunpatnayak/pen/VwrVrba )

var dOffset = $("[data-id = dark]").offset();
var lOffset = $("[data-id = light]").offset();
var Hsvg = $("svg.burger");

$(window).scroll(function () {
  /* initial color */
  // Hsvg.css('stroke', 'white');

  // dOffset.each(function () {
    if ($(window).scrollTop() >= dOffset.top) {
      Hsvg.css("stroke", "white");
    }
  // });
  // lOffset.each(function () {
    if ($(window).scrollTop() >= lOffset.top) {
      Hsvg.css("stroke", "black");
    }
  // });
});

CodePudding user response：

if it's not necessary to use SVG and javascript, I would choose simple HTML and CSS in that case. You can use 'mix-blend-mode' to achieve this effect, look at this example: https://codepen.io/noye/pen/QWOJmvr.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  transition: background 1s ease-in-out;
}

#menuToggle
{
  display: block;
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 1;
  mix-blend-mode: difference;
  -webkit-user-select: none;
  user-select: none;
}


#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: white;
  border-radius: 3px;
  z-index: 1;
}

.section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  color: #000;
  font-family: sans-serif;
  font-size: 72px;
  font-weight: 600;
  text-transform: uppercase;
    
}

[data-id = "dark"]{
  background:black;
  color:white;

}

[data-id = "light"]{
  background:white;
  color: black;
}

<nav role="navigation">
  <div id="menuToggle">
    <span></span>
    <span></span>
    <span></span>
  </div>
</nav>
<section   data-id="dark">
One</section>
<section  data-id="light">Two</section>
<section   data-id="dark">Three</section>
<section  data-id="light">Four</section>
<section   data-id="dark">Five</section>
<section  data-id="light">Six</section>
<section   data-id="dark">Seven</section>
<section  data-id="light">Eight</section>

CodePudding user response：

So I figured out on my own

If anyone wants, here is the code

jQuery Version ( https://codepen.io/tarunpatnayak/pen/VwrVrba )

var dSection = document.querySelectorAll(".dark");
for (var i = 0; i < dSection.length; i  ) {
  dSection[i].setAttribute("data-hcolor", "white");
}
var lSection = document.querySelectorAll(".light");
for (var i = 0; i < lSection.length; i  ) {
  lSection[i].setAttribute("data-hcolor", "black");
}
$(document).ready(function () {
  $(window)
    .scroll(function () {
      var scrollDistance = $(window).scrollTop();
      $(".section").each(function (i) {
        var hColor = $(this).data("hcolor");

        if ($(this).position().top <= scrollDistance) {
          $("svg.burger").css("stroke", hColor);
         // console.log($(this));
        }
      });
    })
    .scroll();
});

JS version ( https://codepen.io/tarunpatnayak/pen/mdqQvoJ )


document.addEventListener("scroll", () => {
  var mSections = document.querySelectorAll(".et_pb_section");
var Hsvg = document.querySelector("svg.burger");

var dSection = document.querySelectorAll(".dark");
for (var i = 0; i < dSection.length; i  ) {
  dSection[i].setAttribute("data-hcolor", "white");
}
var lSection = document.querySelectorAll(".light");
for (var i = 0; i < lSection.length; i  ) {
  lSection[i].setAttribute("data-hcolor", "black");
}
  
  
  let mCurrent = "";
  mSections.forEach((mSection) => {
    const mSectionTop = mSection.offsetTop;
    const mSectionHeight = mSection.clientHeight;
    if (pageYOffset >= mSectionTop * 0.97) {
      mCurrent = mSection.getAttribute("data-hColor");
      Hsvg.style.stroke = mCurrent;
    }
  });
  console.log(mCurrent);
});

Hope this was helpful. Have a Nice Day.