scroll_progress-9.1.x-dev/js/scroll_progress_tooltip.js

(function ($, Drupal, drupalSettings) {
  'use strict';
  Drupal.behaviors.flag_progress_js = {
    attach: function (context, settings) {
      var color = drupalSettings.scroll_progress_color;
      var element = $(drupalSettings.scroll_progress_element);
      if (!element.length) {
        return;
      }
      var content = '<div id="scroll-progress-flag"><div class="scroll-progress-flag-inner-one"><div class="scroll-progress-flag-inner-two"></div><span class="scroll-progress-triangle"></span></div></div>';
      $(once('scroll-progress-processed', drupalSettings.scroll_progress_element)).append(content);
      $('.scroll-progress-flag-inner-two').css('background', color);
      $('.scroll-progress-triangle').css('border-left', '10px solid ' + color);

      scroll_progress_make_tooltip();
      $(window).scroll(function () {
        scroll_progress_make_tooltip();
      });

      function scroll_progress_make_tooltip() {
        var perc = $(window).scrollTop() / ($(document).height() - $(window).height());
        $('.scroll-progress-flag-inner-two').html(Math.round(perc * 100) + '%');
        if ((perc * 100) > 0) {
          $('#scroll-progress-flag').fadeIn();
        }
        else {
          $('#scroll-progress-flag').fadeOut();
        }
      }
    }
  };
}(jQuery, Drupal, drupalSettings));