Vue

by ibufu

HTML

<script src="https://unpkg.com/vue2-scrollspy/dist/index.js"></script>
<div id="app">
  <div class="container">

    <div class="sidebar">

      <ul class="menu" v-scroll-spy-active="{class: 'customActive'}" v-scroll-spy-link>
        <li :key="item" v-for="item in titles" class="menu-item">
          <a>{{item}}</a>
        </li>
      </ul>

      <div class="current-section">Section: {{section}}</div>
    </div>

    <div class="main" v-scroll-spy="{data: 'section'}">
      <div>
        <h1>Ludwig van Beethoven </h1>
        <p>
          (Listeni/ˈlʊdvɪɡ væn ˈbeɪˌtoʊvən/, /ˈbeɪtˌhoʊvən/; German: [ˈluːtvɪç fan ˈbeːtˌhoˑfn̩] ( listen); baptised 17 December 1770[1] – 26 March 1827) was a German composer and pianist. A crucial figure in the transition between the Classical and Romantic eras
          in Western art music, he remains one of the most famous and influential of all composers. His best-known compositions include 9 symphonies, 5 piano concertos, 1 violin concerto, 32 piano sonatas, 16 string quartets, his great Mass the Missa
          solemnis, and one opera, Fidelio. Born in Bonn, then the capital of the Electorate of Cologne and part of the Holy Roman Empire, Beethoven displayed his musical talents at an early age and was taught by his father Johann van Beethoven and by
          composer and conductor Christian Gottlob Neefe. At the age of 21 he moved to Vienna, where he began studying composition with Joseph Haydn, and gained a reputation as a virtuoso pianist. He lived in Vienna until his death. By his late 20s his
          hearing began to deteriorate, and by the last decade of his life he was almost totally deaf. In 1811 he gave up conducting and performing in public but continued to compose; many of his most admired works come from these last 15 years of his
          life.
        </p>
      </div>
      <div>
        <h1>Biography</h1>
        <p>Beethoven was the grandson of Ludwig van Beethoven (1712–73), a musician from the town of...

CSS

.sidebar {
    position: fixed;
    top: 30px;
    left: 10px;
    max-width: 230px;
    font-size: 18px;
  }

  .menu {
    padding: 0;
    list-style: none;
  }

  .current-section {
    padding-top: 50px;
  }

  .current-section input {
    max-width: 3em;
  }

  .menu-item {
    margin-bottom: 20px;
  }

  .menu-item a {
    cursor: pointer;
  }

  .main {
    margin-left: 300px;
    font-size: 25px;
  }

  .customActive {
    color: #178ce6;
    border-left: 1px solid #178ce6;
    padding-left: 5px;
    transition: all 0.5s;
  }

Vue

new Vue({
  el: "#app",
 	data () {
    return {
      section: 0,
      titles: [
        'Ludwig van Beethoven',
        'Biography',
        'Personal and family difficulties'
      ]
    }
  }
})