Vertical Scroll Position Indicator - jQuery Scroll Pointers

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.

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.

  • Publication date: 03.12.2018
  • Source