Swiper horizontal slide scroll navigation

Question

I'm building a top sticky navigation with swiper. It should provide a mobile friendly navigation for long pages. If you click on one item it scrolls to the referenced content on the page.

Right now swiper highlights clicked items with the class "slideActiveClass". This should stay as it is. It also applies this class when sliding through the menu.

I need to change two things.

1. I want to get rid of it applying the active class while sliding through the menu.
2. I want the active slide get set to the specific element related to where the user viewport is located. e.G. If you scroll to "div id=three", the active slide should be changed to the Slide "Three" etc.

Any Idea how to implement this properly?

I think I'd need to use "

swiper.slideTo(index, speed, runCallbacks)

Run transition to the slide with index number equal to 'index' parameter for the duration equal to 'speed' parameter.

index - number - Index number of slide.

speed - number - Transition duration (in ms).

runCallbacks - boolean - Set it to false (by default it is true) and transition will not produce transition events."

taken from: https://swiperjs.com/swiper-api#method-swiper-slideTo

Any help is appreciated.

I'm planning to release the finished code to codepen, since I had trouble finding an example for the requested functionality and think it might be useful for a lot of projects.

var swiper = new Swiper(".swiper-container", {
  slidesPerView: "auto",
  freeMode: true,
  slideToClickedSlide: true,
  spaceBetween: 10,
  mousewheel: true
});

html {
  scroll-behavior: smooth;
}
.swiper-container {
  width: 100%;
}
.swiper-slide {
   background-color: rgba(0,255,0,0.1);
   padding: 10px;
   width: 20%!important;
}
.swiper-slide-active {
  background-color: red;
}

.swiper-container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.swiper-container a {
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.sticky {
  position: sticky;
  top: 0px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet"/>
<div class="sticky">
<div class="swiper-container" id="scroll-tags">
  <ul class="swiper-wrapper">
    <li class="swiper-slide"><a href="#1">One</a></li>
    <li class="swiper-slide"><a href="#2">Two</a></li>
    <li class="swiper-slide"><a href="#3">Three</a></li>
    <li class="swiper-slide"><a href="#4">Four</a></li>
    <li class="swiper-slide "><a href="#5">Five</a></li>
    <li class="swiper-slide"><a href="#6">Six</a></li>
    <li class="swiper-slide"><a href="#">item 7</a></li>
    <li class="swiper-slide"><a href="#">item 8</a></li>
    <li class="swiper-slide"><a href="#">item 9</a></li>
    
    
  </ul>
</div>
</div>
<div style="height: 500vh">
  <div class="class1" style="height:50vh;background-color: rgba(255,0,0,0.1);" id="1">One</div>
  <div class="class2" style="height:50vh;background-color: rgba(255,123,32,0.1);" id="2">Two</div>
  <div class="class3" style="height:50vh;background-color: rgba(255,122,0,0.1);" id="3">Three</div>
<div class="class4" style="height:50vh;background-color: rgba(255,122,0,0.1);" id="4">Four</div>
<div class="class5" style="height:50vh;background-color: rgba(255,122,0,0.1);" id="5">Five</div>
<div class="class6" style="height:50vh;background-color: rgba(255,122,0,0.1);" id="6">Six</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>