JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page-header" class="transparent"></div>

CSS

body {
    height: 2000px;
}

JavaScript

$(window).scroll(function() {
    var $header = $("#page-header");
    var windowHeight = $(window).height();
    var percent = 50;
    if ($(window).scrollTop() > (windowHeight/100*percent) && $header.hasClass("transparent")) {
      $header.removeClass("transparent").addClass("opacity");
      alert("Проскролено > " + percent + "%; Скролл: " + windowHeight);
    } else if ($(window).scrollTop() <= (windowHeight/100*percent) && $header.hasClass("opacity")) {
      $header.removeClass("opacity").addClass("transparent");
      alert("Проскролено <= " + percent + "% Скролл: " + windowHeight);
    }
  }); //scroll