向下滚动或仅 src （源）更改时为图像提供滤镜效果

Question

所以基本上，当我尝试使用 css 添加 filter: invert(1) grayscale(1) contrast(2); 效果时，无论我是否向下滚动，它都会发生。我想要的是一旦有人向下滚动它就会发生。所以我发现我需要使用 scrollfunction 可能是这样的，我不确定，因为我对这种语言的经验不足

我不知道接下来要添加什么代码作为滤镜效果，甚至在向下滚动后替换徽标。

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>

Answer 1

我做了一个基本的 pen 来展示如何做这样的事情。

因为你在标签中提到了jQuery，所以我用jQuery来举例。

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

向下滚动或仅 src （源）更改时为图像提供滤镜效果

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

javascript

css

wordpress

jquery