инвертировать цвета navbar за 70vh - html / css

Question

Я хочу инвертировать цвет моей панели навигации, когда она превысит 70vh.

Я думаю, что мне нужен @media с добавлением invert к контейнеру и логотипу nav с надписью @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/