Vertical Scroll Position Indicator - jQuery Scroll Pointers

File Size: 2.7 KB
Views Total: 2084
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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

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

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="" 

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) 

6. Execute the function on scroll.

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

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

    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.