Javascript 导航滚动并单击定位标记

Javascript 导航滚动并单击定位标记,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我使用这两个脚本,一个用于在单击锚定标记时更改类,另一个用于在向下滚动页面时更改类。当我单击锚定标记时,类会更改,但由于滚动功能,它会返回,我也会设置滚动页面的动画。我怎样才能避免两者之间的冲突 基于锚点更改类 <script> $(document).ready(function () { $('.sidebar-nav li a').click(function(e) { $('.sidebar-nav li').removeClass('active_nav'); var $

我使用这两个脚本,一个用于在单击锚定标记时更改类,另一个用于在向下滚动页面时更改类。当我单击锚定标记时,类会更改,但由于滚动功能,它会返回,我也会设置滚动页面的动画。我怎样才能避免两者之间的冲突

基于锚点更改类

<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>

$(文档).ready(函数(){
$('.sidebar nav li a')。单击(函数(e){
$('.sidebar nav li').removeClass('active_nav');
var$parent=$(this.parent();
if(!$parent.hasClass('active_nav')){
$parent.addClass('active_nav');
}
e、 preventDefault();});});
基于滚动更改类

<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>

$(窗口)。滚动(函数(){
var windscroll=$(window.scrollTop();
$('.page')。每个(函数(i){

if($(this).position().top如果
$(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');
    }
});
});
$(窗口)。滚动(函数(){
var windscroll=$(window.scrollTop();
$('.page')。每个(函数(i){
var posTop=$(this).position().top,
h=$(this).height();
if(事后风蚀){
$('.sidebar nav li').removeClass('active_nav');
$('.sidebar nav li').eq(i).addClass('active_nav');
}
});
});

滚动时,列表元素上的类不会改变啊是的,您需要在
$(窗口)上执行此操作。滚动();
。我已经更新了答案,并在JSFIDLE上做了一个简单的演示。我还认为没有必要在anchor click上更改类,因为您已经在scroll上进行了更改。是的!非常棒。我还删除了锚链接的脚本。我只需要这个脚本就可以了。谢谢:)
$(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');
    }
});
});