JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<ul id="nav">
	<li class="current"><a href="#section-1">Section 1</a></li>
	<li><a href="#section-2">Section 2</a></li>
	<li><a href="#section-3">Section 3</a></li>
</ul>

<div id="section-1">
	<strong>Section 1</strong>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div id="section-2">
	<strong>Section 2</strong>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div id="section-3">
	<strong>Section 3</strong>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

CSS

.wp-block-uagb-table-of-contents {
  margin-top: 2rem;
}

.wp-block-uagb-table-of-contents ul {
  margin: 0 !important;
}

.wp-block-uagb-table-of-contents ul li {
  list-style: none;
}

.wp-block-uagb-table-of-contents ul li:before {
  content: none;
}

.wp-block-uagb-table-of-contents ul li.active a {
  font-weight: bold;
  opacity: 1;
  transform: scale(1);
}

.wp-block-uagb-table-of-contents ul li a {
  color: teal;
  font-weight: 700;
  text-decoration: none;
}

.uagb-toc__wrap {
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
}

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

/* ////////////////////////////////// */
/* //////////// MENU ///////////// */
/* //////////////////////////////// */
.uagb-toc__list-wrap {
  position: fixed;
  top: 50%;
  right: 60px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  /* background: rgba(255, 0, 0, 0.31);
    */
}

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

.uagb-toc__list li {
  display: block;
  text-align: right;
  opacity: 0.5;
  padding: 1vh 0;
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  text-shadow: 1px 1px 9px #fff, 1px 1px 4px #fff;
}

#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);
  -webkit-transform: translateX(-50%) translateY(-50%);
  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,...

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) {
     ...