Как сделать, чтобы после нажатия на пункт смена активного элемента происходила по-другому?
кликаю я на первый пункт меню - выделяется он потом кликаю на последний ( четвертый ) то когда идет скрол - второй и третий также пункты также выделяются этого не нужно
$(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>