blah

by Richard Hunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-undefined uagb-block-84b71cc1-d86a-477b-a4d8-13ad158cfc23" data-scroll="true" data-offset="30" data-delay="800">
hello
    <div class="uagb-toc__wrap">
        <div class="uagb-toc__title-wrap uagb-toc__is-collapsible">
            <div class="uagb-toc__title">Sommaire</div>
            <span class="uag-toc__collapsible-wrap">
                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512">
                    <path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path>
                </svg>
            </span>
        </div>
        <div class="uagb-toc__list-wrap" data-headers="">
            <ul class="uagb-toc__list">
                <li class="current">
                    <a href="#titre-h2">Titre H2</a>
                </li>
                <ul class="uagb-toc__list">
                    <li>
                        <a href="#titre-h3">Titre H3</a>
                    </li>
                    <ul class="uagb-toc__list">
                        <li>
                            <a href="#titre-h4">Titre H4</a>
                        </li>
                    </ul>
                </ul>
                <li>
                    <a href="#autre-titre-h2">Autre titre H2</a>
                </li>
            </ul>
        </div>
    </div>
</div>

SCSS

.wp-block-uagb-table-of-contents {
   margin-top: 2rem;
 }
$fw-light: lightblue;
 ul {
   li {
     list-style: none;

     &:before {
       content: none;
     }

     a {
       color: teal;
       font-weight: $fw-light;
       text-decoration: none;
     }

     &.active {
       a {
         font-weight: bold;
         opacity: 1;
         transform: scale(1);
       }
     }


   }
 }

 .uagb-toc__wrap {

   background: red;
   display: flex !important;
   flex-direction: column;
   align-items: flex-end;

   .uagb-toc__title-wrap {
     span.uag-toc__collapsible-wrap {
       display: none;
     }
   }
 }

 .uagb-toc__list-wrap {
   position: fixed;
   top: 50%;
   right: 60px;
   transform: translateY(-50%);
 }

 .uagb-toc__list {
   color: #002c52;
   padding: 0 30px;
 }

 .uagb-toc__list li {
   display: block;
   text-align: right;
   opacity: .5;
   padding: 1vh 0;
   cursor: pointer;
   transition: all .4s ease;
   transform-origin: 100% 50%;
   transform: scale(.9);

   text-shadow: 1px 1px 9px #fff, 1px 1px 4px #fff;
 }

 .uagb-toc__list li:hover {
   opacity: 1;
   transform: scale(1);
 }

 .uagb-toc__list li.active {
   font-weight: bold;
   opacity: 1;
   transform: scale(1);
 }

 #menu_slider {
   position: absolute;
   width: 2px;
   height: 100%;
   left: 0;
   top: 0;
   background: rgba(0, 44, 82, 0.4);
 }

 #menu_slider_circle {
   position: absolute;
   top: 0%;
   left: 1px;
   width: 10px;
   height: 10px;
   border-radius: 30px;
   background: rgba(0, 44, 82, 1);
   transform: translateX(-50%) translateY(-50%);
 }

 #menu_slider_circle::before {
   content: '';
   position: absolute;
   top: -8px;
   left: -8px;
   bottom: -8px;
   right: -8px;
   border-radius: 60px;
   background: rgba(0, 44, 82, .1);
 }

 #menu_titles,
 #menu_slider,
 #menu_slider_circle,
 #menu.white #menu_slider_circle::before {
   -webkit-transition: all .4s ease;
   transition: all .4s ease;
 }

 #menu.white #menu_titles {
   color: #fff;
 }

 #menu.white...

JavaScript

// Jquery nav 
/*
 * jQuery One Page Nav Plugin
 * http://github.com/davist11/jQuery-One-Page-Nav
 *
 * Copyright (c) 2010 Trevor Davis (http://trevordavis.net)
 * Dual licensed under the MIT and GPL licenses.
 * Uses the same license as jQuery, see:
 * http://jquery.org/license
 *
 * @version 3.0.0
 *
 * Example usage:
 * $('#nav').onePageNav({
 *   currentClass: 'current',
 *   changeHash: false,
 *   scrollSpeed: 750
 * });
 */

;
(function($, window, document, undefined) {

  // our plugin constructor
  var OnePageNav = function(elem, options) {
    this.elem = elem;
    this.$elem = $(elem);
    this.options = options;
    this.metadata = this.$elem.data('plugin-options');
    this.$win = $(window);
    this.sections = {};
    this.didScroll = false;
    this.$doc = $(document);
    this.docHeight = this.$doc.height();
  };

  // the plugin prototype
  OnePageNav.prototype = {
    defaults: {
      navItems: 'a',
      currentClass: 'current',
      changeHash: false,
      easing: 'swing',
      filter: '',
      scrollSpeed: 750,
      scrollThreshold: 0.5,
      begin: false,
      end: false,
      scrollChange: false
    },

    init: function() {
      // Introduce defaults that can be extended either
      // globally or using an object literal.
      this.config = $.extend({}, this.defaults, this.options, this.metadata);

      this.$nav = this.$elem.find(this.config.navItems);

      //Filter any links out of the nav
      if (this.config.filter !== '') {
        this.$nav = this.$nav.filter(this.config.filter);
      }

      //Handle clicks on the nav
      this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this));

      //Get the section positions
      this.getPositions();

      //Handle scroll changes
      this.bindInterval();

      //Update the positions on resize too
      this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));

      return this;
    },

    adjustNav: function(self, $parent) {
     ...