Vertical Scroll Position Indicator - jQuery Scroll Pointers

A jQuery based vertical scroll position indicator for one page scroll website that automatically adds an active class to the indicator bullets when scrolling through page sections.

How to use it:

1. Create the page sections as follows:

<main class="main">
  <section class="main__section main__section--1"></section>
  <section class="main__section main__section--2"></section>
  <section class="main__section main__section--3"></section>
  <section class="main__section main__section--4"></section>
</main>

2. Create the HTML for the vertical scroll position indicator.

<nav>
  <ul>
    <li class="dot dot--1"></li>
    <li class="dot dot--2"></li>
    <li class="dot dot--3"></li>
    <li class="dot dot--4"></li>
  </ul>
</nav>

3. Style & position the page sections as follows:

nav {
  position: fixed;
  top: 30%;
  bottom: 30%;
  right: 2%;
  width: 60px;
  padding: 30px 0;
}

nav ul {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;;
  align-items: center;
}

nav ul li {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #f4f4e4;
}

4. Import the necessary jQuery library into the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>

5. The main function to detect the scroll position and add/remove active class in case the page section is scrolled into view.

function changeDot() {
  var scrollTop = $('html, body').scrollTop(),
      section = $('.main__section');

  section.each(function (i, elem) {
      var that = $(elem),
          sectionScroll = that.offset().top,
          sectionHeigth = that.outerHeight(),
          distance = sectionScroll - scrollTop,
          procent = (-distance * 100) / (sectionHeigth);
      
      if (procent >= -10 && procent <= 90) {
         
          var dots = $('.dot');
          var dotsEq = dots.eq(i) 
          
          dotsEq.prev().removeClass('active');
          dotsEq.next().removeClass('active');
          dotsEq.addClass('active');
      }
  })
}

6. Execute the function on scroll.

$(document).on("scroll", changeDot)

7. Apply your own styles to the activated indicator bullets.

.active{
    box-shadow: 0 0 0 3px #222 , 0 0 0 6px #222;
}

---

This awesome jQuery plugin is developed by GrzegorzNecka. For more Advanced Usages, please check the demo page or visit the official website.