Giving filter effect to image when scrolled down or just src (source) change-CodePudding

So basically when i try to give add filter: invert(1) grayscale(1) contrast(2); effect with css it happens whether i scroll down or not. What i want is for it to happen once someone scrolls down. So i figured out that i need to use scrollfunction probably something like this which i am not sure since im not experienced enough on this language

i dont know what code to add next as filter effect or even replacing the logo once scrolled down.

window.onscroll = function() {
  scrollFunction1()
  scrollFunction2()
};


function scrollFunction1() {
  if (document.body.scrollTop > 100 ||
    document.documentElement.scrollTop > 100) {
    document.getElementById("menu")
      .style.backgroundColor = "red";
  } else {
    document.getElementById("menu")
      .style.backgroundColor = "#333";
  }
}

function scrollFunction2() {
  if (document.body.scrollTop > 100 ||
    document.documentElement.scrollTop > 100) {
    document.getElementById("menu")
      .style.boxShadow = "0 0 5px 0 #2a2a2a8f";
  } else {
    document.getElementById("menu")
      .style.boxShadow = "none";
  }
}

.header {
  height: 800px;
  background-color: #333;
  transition: 0.5s;
}

.ast-mobile-header-logo {
  position: fixed;
  top: 0;
  right: 0;
}

h1 {
  font-size: 30px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header  id="menu">
  <span><img width="auto" height="180px" src="https://urbanmuse.co.in/images/logob.png"  alt="" loading="lazy"></span>
  <h1> example logo btw</h1>
</header>

CodePudding user response：

I made a rudimentary pen to showcase how to do something like this.

Since you mentioned jQuery in tags, i used jQuery for the example.

$(document).on('scroll', (e) => {
    // here we create anonymous arrow function and bind it on page scroll.

    if (document.body.scrollTop > 100 ||
    document.documentElement.scrollTop > 100) {
      // the image will be filtered if the scroll is over 100.
      // the easiest way is to add or remove a class on the element that
      // contains the css filter rule.
      $('img.ast-mobile-header-logo').addClass('filter');
    } else {
      // we have to remove the filter again if scroll is under 100.
      $('img.ast-mobile-header-logo').removeClass('filter');
    }
});

HTML

<head>
  <!-- your head stuffs -->
</head>

<body>
  <div >
    <a >
      <img width=800 src="https://cdn.pixabay.com/photo/2019/08/19/07/45/dog-4415649_960_720.jpg" >
    </a>
  </div>
</body>

CSS

.ast-mobile-header-logo.filter {
  filter: invert(1) grayscale(1) contrast(2);
}

/* wrapper is just here to demonstrate scroll.
   on scroll only triggers if there is something to scroll! */
.wrapper {
  height: 200vh;
}