How to add active class to selected list item

Question

Hi I'm trying to add class to the selectedlList item & also add class if I scroll to the specific div. for example of scroll on div#six number six(6) in the menu should also have class active.

[see my code and demo here][1]

  [1]: https://codepen.io/GoPerov/pen/aZmVgE

Answer 1

Try this code, Here's your updated pen

$(document).ready(function(){
  $(".page-scroll").click(function(){
     $(".page-scroll").removeClass("active");  //removes current active class      
    $(this).addClass("active");   // adds active class to specific click
  })
});

Answer 2

Update your code as below.

You need to manually check for which div is currently active with scroll position.

Updated codepen demo

$(document).ready(function() {
  $(".page-scroll").click(function() {
    $(".page-scroll").removeClass("active"); //removes current active class
    $(this).addClass("active"); // adds active class to specific click
  });
});

$(window).scroll(function() {
  var selectedDiv = $(".page-scroll:first");
  var topOffset = 1;
  var windowTop = $(window).scrollTop();

  $(".page-scroll").each(function() {
    var id = $(this).attr("href");
    var offset = ($(id).offset() || {
      top: 0
    }).top - windowTop;
    if (offset < 1 && (topOffset == 1 || offset > topOffset)) {
      topOffset = offset;
      selectedDiv = $(this);
    }
  });

  if (!selectedDiv.hasClass("active")) {
    $(".page-scroll").removeClass("active");
    selectedDiv.addClass("active");
  }
});