Как сделать, чтобы после нажатия на пункт смена активного элемента происходила по-другому?

кликаю я на первый пункт меню - выделяется он потом кликаю на последний ( четвертый ) то когда идет скрол - второй и третий также пункты также выделяются этого не нужно

$(document).ready(function() {

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      var link = $(`.conversion__link[href='#${entry.target.id}']`);
      if (entry.isIntersecting) {
        // в зоне видимости появился заголовок
        // делаем все пункты не активными
        $(`.conversion__link`).each(function() {
          $(this).removeClass('conversion__link--active');
        });
        // и делаем активными нужные
        link.each(function() {
          $(this).addClass('conversion__link--active');
        })
      } else {
        link.each(function() {
          $(this).removeClass('conversion__link--active');
        });
      }
    });
  }, {
    rootMargin: '0px 0px -50% 0px',
    threshold: 0.3
  });


  let titles = $('.title');
  for (let title of titles) {
    observer.observe(title)
  }

  $('.conversion__nav').on("click", ".conversion__link", function() {
    let elems = $('.conversion__link');
    elems.each(function(index, item) {
      $(item).removeClass('conversion__link--active')
    });
    $(this).addClass('conversion__link--active');
    var target = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $(target).offset().top - $('.conversion').height()
    }, 800);
    return false;
  });

});
.conversion__link {
  color: #fff;
}

.conversion__link--active {
  color: orange;
}

.visible-links {
  position: fixed;
  top: 0px;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style-type: none;
  background-color: #292929;
}
<div class="conversion">
  <div class="conversion__nav">
    <ul class="visible-links">
      <li class=""><a class="conversion__link conversion__link--active" href="#c1">test 1</a></li>
      <li class=""><a class="conversion__link" href="#c2">test 2</a></li>
      <li class=""><a class="conversion__link" href="#c3">test 3</a></li>
      <li class=""><a class="conversion__link" href="#c4">test 4</a></li>
    </ul>
  </div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quae reprehenderit, voluptatum autem provident libero eos magni veritatis ut eaque officiis voluptatem expedita ad aspernatur ipsam cumque sint aut commodi.</p>

<h3 class="title" id="c1">title 1</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quae reprehenderit, voluptatum autem provident libero eos magni veritatis ut eaque officiis voluptatem expedita ad aspernatur ipsam cumque sint aut commodi.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quae reprehenderit, voluptatum autem provident libero eos magni veritatis ut eaque officiis voluptatem expedita ad aspernatur ipsam cumque sint aut commodi.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quae reprehenderit, voluptatum autem provident libero eos magni veritatis ut eaque officiis voluptatem expedita ad aspernatur ipsam cumque sint aut commodi.</p>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quae reprehenderit, voluptatum autem provident libero eos magni veritatis ut eaque officiis voluptatem expedita ad aspernatur ipsam cumque sint aut commodi.</p>

<h3 class="title" id="c2">title 2</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quae reprehenderit, voluptatum autem provident libero eos magni veritatis ut eaque officiis voluptatem expedita ad aspernatur ipsam cumque sint aut commodi.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quae reprehenderit, voluptatum autem provident libero eos magni veritatis ut eaque officiis voluptatem expedita ad aspernatur ipsam cumque sint aut commodi.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quae reprehenderit, voluptatum autem provident libero eos magni veritatis ut eaque officiis voluptatem expedita ad aspernatur ipsam cumque sint aut commodi.</p>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quae reprehenderit, voluptatum autem provident libero eos magni veritatis ut eaque officiis voluptatem expedita ad aspernatur ipsam cumque sint aut commodi.</p>

<h3 class="title" id="c3">title 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quae reprehenderit, voluptatum autem provident libero eos magni veritatis ut eaque officiis voluptatem expedita ad aspernatur ipsam cumque sint aut commodi.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quae reprehenderit, voluptatum autem provident libero eos magni veritatis ut eaque officiis voluptatem expedita ad aspernatur ipsam cumque sint aut commodi.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quae reprehenderit, voluptatum autem provident libero eos magni veritatis ut eaque officiis voluptatem expedita ad aspernatur ipsam cumque sint aut commodi.</p>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quae reprehenderit, voluptatum autem provident libero eos magni veritatis ut eaque officiis voluptatem expedita ad aspernatur ipsam cumque sint aut commodi.</p>

<h3 class="title" id="c4">title 4</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quae reprehenderit, voluptatum autem provident libero eos magni veritatis ut eaque officiis voluptatem expedita ad aspernatur ipsam cumque sint aut commodi.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quae reprehenderit, voluptatum autem provident libero eos magni veritatis ut eaque officiis voluptatem expedita ad aspernatur ipsam cumque sint aut commodi.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quae reprehenderit, voluptatum autem provident libero eos magni veritatis ut eaque officiis voluptatem expedita ad aspernatur ipsam cumque sint aut commodi.</p>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quae reprehenderit, voluptatum autem provident libero eos magni veritatis ut eaque officiis voluptatem expedita ad aspernatur ipsam cumque sint aut commodi.</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


Ответы (0 шт):