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

Question

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

我在想我需要一个@media，它在导航容器和徽标中添加了反转，上面写着类似@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 时向导航添加 class，因此您可以将 invertColor class 设置为 filter:invert(1)这应该可以解决问题，这里有一些关于 scrollTop 函数的文档 https://api.jquery.com/scrollTop/

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

invert navbar colors past 70vh - html/css

html

css

nav

css-filters