invert navbar colors past 70vh - html/css

Question

I'm wanting to invert the color of my navbar once it goes past 70vh.

I'm thinking I need an @media with invert added to the nav container & logo saying something like @media at 70vh add filter:invert(1); not sure how I word it though, It needs to work on both image and text,

If anyone has any ideas would be great!

Answer 1

You can't do that using only css, you will have to use some JavaScript, here you have an example using jQuery.

$(window).scroll(function() {

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

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

What that code do is to add a class to your nav when the scroll is >= to 100vh, so you can set the invertColor class to filter:invert(1) and that should do the trick, here you have some documentation about the scrollTop function https://api.jquery.com/scrollTop/