How to make .scrollTop() as a percentage?

Question

JavaScript

Hello.
Is it possible to bind .scrollTop()to percentages (preferably vh) rather than pixels?

For example code:

$(document).ready(function() {
  var $header = $("#header");

  $(window).scroll(function() {
    if ($(this).scrollTop() > 700 && $header.hasClass("transparent")) {
      $header.removeClass("transparent").addClass("opacity");
    } else if ($(this).scrollTop() <= 700 && $header.hasClass("opacity")) {
      $header.removeClass("opacity").addClass("transparent");
    }
  }); //scroll
});

With it, classes are added or removed depending on the scroll. In this case, you need to scroll 700px to change it. I need the metering to take place in percent (or vh). That is, for example, if I scrolled 80% of the window (or viewport), then the class changes.

Answer 1

The height of the document ( $(document).height() ) is divided by 100, multiplied by the desired % scroll.