0

以下のコードを使用して、スクロール時にクラスをスティッキー ナビゲーション バーに追加しています。正常に動作しますが、ナビゲーションバーのli要素がクリックされたときにスクロール機能を無効にして、ユーザーがナビゲーションをクリックした後のスクロールアニメーションが開始されたときにクラスの変更を開始しないようにしたいので、無効にする必要があると思いますスクロールアニメーションが完了するまでスクロール機能。助言がありますか?

EDIT 多分私はここで不明確です。ユーザーがアイテムをクリックしたときに、スクロール アニメーションを使用します。また、ユーザーが li アイテムの div を超えてスクロールした場合にアクティブなクラスを追加する関数も使用します。ユーザーがページの上部にいて、li アイテムの 1 つをクリックすると、アクティブなクラスが最初にクリックした li に追加され、その後すべての li アイテムに追加されますが、li だけにとどまります。彼らがクリックしたアイテムなので、クリックからのスクロールアニメーションが完了するまで、スクロール機能にアクティブなクラスを追加することを無効にする必要があるかもしれませんか?

$(window).scroll(function(){
    var top = $(window).scrollTop(),
    nav_distance = 450,
    grid_3_distance = $("section.grid.third").offset().top - 1,
    grid_4_distance = $("section.grid.fourth").offset().top - 230;

    if(top > nav_distance) {
        $("section.grid.second ul").addClass("fixed");
    } else if(top < nav_distance) {
        $("section.grid.second ul").removeClass("fixed");
    }

    if(top > nav_distance){
        $("section.grid.second ul nav li").removeClass("active");
        $("section.grid.second ul nav li[data-intern='.grid.second']").addClass("active");
    }

    if(top > grid_3_distance){
        $("section.grid.second ul nav li").removeClass("active");
        $("section.grid.second ul nav li[data-intern='.grid.third']").addClass("active");
    }

    if(top > grid_4_distance){
        $("section.grid.second ul nav li").removeClass("active");
        $("section.grid.second ul nav li[data-intern='.grid.fourth']").addClass("active");
    }
});

$(function(){
    $("section.grid.second ul nav li").click(function(){
        $("section.grid.second ul nav li").removeClass("active");
        $(this).addClass("active");
        var id = $(this).attr("data-intern");
        $('html,body').animate({scrollTop:$(id).offset().top}, 500);
    });
4

0 に答える 0