change svg color on different section

Question

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


  

One
Two
Three
Four
Five
Six
Seven
Eight

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");
    }
  // });
});

user_7242124 · Answer

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;
}


  
    
    
    
  


One
Two
Three
Four
Five
Six
Seven
Eight

user_18210798 · Answer

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.

change svg color on different section

2 Answers