Навигационная прокрутка и щелчок на якорный тег

Question

Я использую эти два скрипта, один для изменения класса при щелчке тега привязки, а другой - при изменении прокрутки вниз по странице. Когда я нажимаю тег привязки, класс изменяется, но из-за функции прокрутки он отбрасывает спины, я также анимируюсь на моей странице прокрутки. Как я могу избежать столкновений между ними.

Изменить класс на основе привязки.

<script> 
$(document).ready(function() { 
$('.sidebar-nav li a').click(function(e) { 
$('.sidebar-nav li').removeClass('active_nav'); 
var $parent = $(this).parent(); 
if (!$parent.hasClass('active_nav')) { 
$parent.addClass('active_nav'); 
} 
e.preventDefault();});}); 
</script> 

Изменение класса на основе прокрутки

<script> 
$(window).scroll(function() { 
var windscroll = $(window).scrollTop(); 
    $('.page').each(function(i) { 
     if ($(this).position().top <= windscroll) { 
      $('.sidebar-nav li').removeClass('active_nav'); 
      $('.sidebar-nav li').eq(i).addClass('active_nav'); 
     } 
    });}); 
</script> 

прокруткой страницы

<script> 
$('.scroll a').click(function(e) { 
var goTo = $(this).attr('href'); // selects element that was clicked 
$("html,body").animate({scrollTop:$(goTo).offset().top}, 1000); 
e.preventDefault(); 
}); 
</script> 

Answer 1

Вы, вероятно, следует добавить условие, если $(this).position().top + $(this).height() > windscroll.

$(window).scroll(function() { 
var windscroll = $(window).scrollTop(); 
$('.page').each(function(i) { 
    var posTop = $(this).position().top, 
     h = $(this).height(); 

    if (posTop <= windscroll && posTop + h > windscroll) { 
     $('.sidebar-nav li').removeClass('active_nav'); 
     $('.sidebar-nav li').eq(i).addClass('active_nav'); 
    } 
}); 
});