Entonces, básicamente, cuando trato de agregar un filter: invert(1) grayscale(1) contrast(2); efecto con css sucede si me desplazo hacia abajo o no. Lo que quiero es que suceda una vez que alguien se desplace hacia abajo. Así que descubrí que necesito usar la función de desplazamiento, probablemente algo como esto, lo cual no estoy seguro ya que no tengo suficiente experiencia en este idioma.
No sé qué código agregar a continuación como efecto de filtro o incluso reemplazar el logotipo una vez que se desplaza hacia abajo.
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 class="header text-center" id="menu"> <span><img width="auto" height="180px" src="https://urbanmuse.co.in/images/logob.png" class="ast-mobile-header-logo" alt="" loading="lazy"></span> <h1> example logo btw</h1> </header>Hice un bolígrafo rudimentario para mostrar cómo hacer algo como esto.
Como mencionaste jQuery en las etiquetas, usé jQuery para el ejemplo.
JS
$(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 class="wrapper"> <a class="custom-mobile-logo-link"> <img width=800 src="https://cdn.pixabay.com/photo/2019/08/19/07/45/dog-4415649_960_720.jpg" class="ast-mobile-header-logo"> </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; }