html - 反转超过 70vh 的导航栏颜色 - html/css

Question

我想在导航栏超过 70vh 时反转它的颜色。

我在想我需要一个@media with invert 添加到 nav container & logo 说类似 @media at 70vh add filter:invert(1);虽然不确定我怎么说，它需要同时处理图像和文本，

如果有人有任何想法就太好了!

Answer 1

你不能只使用 css 来做到这一点，你必须使用一些 JavaScript，这里有一个使用 jQuery 的例子。

$(window).scroll(function() {

  var scroll = $(window).scrollTop();
  var winVH = $(window).height();

  if (scroll >= winVH) {
    $(".yourNavClass").addClass("invertColor");
  } else {
    $(".yourNavClass").removeClass("invertColor");
  }
});

该代码的作用是在滚动 >= 到 100vh 时向您的导航添加一个类，因此您可以将 invertColor 类设置为 filter:invert(1) 并且这应该可以解决问题，这里有一些文档关于 scrollTop 函数 https://api.jquery.com/scrollTop/