javascript - ウィンドウのスクロール時にナビゲーション アクティブ クラスを変更する

Question

ここのようなスクロール効果を作成したい http://www.strikingly.com/s/pages/default-ion?demo=ion#1 この瞬間に必要なのは、ウィンドウがスクロールしているときにナビゲーション li クラスをアクティブに変更することだけです、<a href='#about'>ハッシュターゲットを使用してそれを変更するだけです

http://jsfiddle.net/Dxtyu/131/

Answer 1

デモ

Serliteのコードは非常に優れていますが、いくつかのバグがありました。

1. 最後までスクロールすると、最後の 2 つのa要素にactiveクラスがあるため、両方が強調表示されます。

解決

$('#menu-center ul li a').removeClass("active");以下のコードで新しいクラスを追加する前に、以前のアクティブなクラスをすべて削除するために追加されました。

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

2. 2 つ目以降のメニュー リンクをクリックすると、その場所までスクロールしますが、アクティブなクラスが前のリンクに変更されます。

解決

$('html, body').stop().animate({
            'scrollTop': $target.offset().top+2

Answer 2

IE9でしゃっくりしたので修正しました

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

    //smoothscroll
    $('a[href^="#"]').click(function(){
    var target = $(this).attr('href');
    $('html, body').animate({scrollTop: $(target).offset().top-48}, 500);
    return false;

        $("#menu a").click(function () {
            $("#menu a").removeClass('active');
        })
        $(this).addClass('active');

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

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

Answer 3

私は遅れていることを知っていますが、私の答えはこのスレッドの新しい視聴者を助けるかもしれません. Tushar Gupta の答えは正しいです。ただし、メニューに他のページにリダイレクトするリンクがある場合。Tushar Gupta の Answer はエラーをスローします。例えば

    <div class="m1 menu">
    <div id="menu-center">
        <ul>
            <li><a  href="#home">Home</a>
            </li>
            <li><a  href="#portfolio">Portfolio</a>
            </li>
            <li><a  href="#about">About</a>
            </li>
            <li><a  href="http://mywebsite.com/blog">Blog</a>
            </li>
            <li><a  href="#contact">Contact</a>
            </li>
        </ul>
    </div>
   </div>
   <div id="home"></div>
   <div id="portfolio"></div>
   <div id="about"></div>
   <div id="contact"></div>

これにより、コンソールに次のようなエラーがスローされます。また、連絡先のスクロールは機能しません。その問題を修正するために Tushar のコードを更新しました。

function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a[href*=#]:not([href=#])').each(function () {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $('#menu-center ul li a').removeClass("active"); //added to remove active class from all a elements
        currLink.addClass("active");
    }
    else{
        currLink.removeClass("active");
    }
});
}