Question

我正在做一个单页，导航.active类应该在滚动和单击时更改。我也在向下滚动时更改标题类（“.large”和“.small”），但这两个脚本在某种程度上不能相互协作。

对于标题大小调整，我这样做：

$(document).on("scroll",function(){
if($(document).scrollTop()>200){
    $('header').removeClass('large').addClass('small');
} else{
    $('header').removeClass('small').addClass('large');

}

}）;

对于更改活动课程，我这样做：

$(document).ready(function () {
$(document).on("scroll", onScroll);

//smoothscroll
$('a[href^="#"]').on('click', function (e) {
    e.preventDefault();
    $(document).off("scroll");

    $('a').each(function () {
        $(this).removeClass('active');
    })
    $(this).addClass('active');

    var target = this.hash,
        menu = target;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top+2
    }, 500, 'swing', function () {
        window.location.hash = target;
        $(document).on("scroll", onScroll);
    });
});
});

function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#top-menu a').each(function () {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.
    position().top + refElement.height() > scrollPos) {
        $('#top-menu ul li a').removeClass("active");
        currLink.addClass("active");
    }
    else{
        currLink.removeClass("active");
    }
});

}

这在滚动时效果很好，但点击顶部导航链接只会崩溃“标题”功能，它不会再调整大小。任何人都可以看到问题是什么？

Answer 1

如f00bar所述，$（document）.off（“scroll”）;删除eventhandler。滚动事件不再被触发。所以你的顶级代码不会在点击后运行。

在滚动和单击时更改活动导航类时出现jquery问题

1 个答案: