1

これがどれほど可能かはわかりませんが、試してみようと思いました。

サイトをスクロールするだけの簡単なスクロールがあります。スクロールすると、それぞれが別々のセクションになり、色で明確に定義されます。右側にいくつかの固定ナビゲーションがあり、リンクをクリックすると、そのセクションまでスムーズに下 (または上) にスクロールします。これはすべて正常に機能しています。

私が求めているのは、そのセクションにスクロールするとナビゲーションのリンクの色が変わることです。つまり、「アクティブ」セクションとしてマークします。単純な「addClass」または「css」jQuery をクリックすると変更できると思いましたが、ユーザーが自由にスクロールできる機能もあるので、ユーザーがスクロールしてどのセクションを表示するかを決定するためにナビゲーション リンクが変更されるとよいでしょう。にあります。

http://dataveyes.com/en/ — この Web サイトのしくみですが、スクロールするときに表示しているセクションに応じてナビゲーション リンクの色が変わります。

このようなことが可能かどうか知りたいので、まだ HTML を投稿しません。

アップデート

ナビゲーション用の HTML

<div class="menu-navigation-desktop not-mobile">
    <ul>
        <li class="menu-item-home"><a class="smooth-scroll-no-offset" href="#home"><span class="ss-icon ss-gizmo">home</span></a></li>
        <li class="menu-item-we"><a class="smooth-scroll" href="#we">We</a></li>
        <li class="menu-item-design"><a class="smooth-scroll" href="#design">Design</a></li>
        <li class="menu-item-sustainability"><a class="smooth-scroll" href="#sustainability">Sustainability</a></li>
        <li class="menu-item-form"><a class="contact-form-action"><span class="ss-icon ss-gizmo">compose</span></a></li>
        <li class="menu-item-contact"><a class="smooth-scroll" href="#contact"><span class="ss-icon ss-gizmo">phone</span></a></li>
    </ul>
</div>
4

1 に答える 1

2

次のようなものを使用できます。

var sections = $('.section');
$(window).scroll(function() {
    var currentPosition = $(this).scrollTop();
    sections.removeClass('selected').each(function() {
        var top = $(this).offset().top,
            bottom = top + $(this).height();
        if (currentPosition >= top && currentPosition <= bottom) {
            $(this).addClass('selected');
        }
    });
});

http://jsfiddle.net/GBbu6/1/

于 2013-05-01T11:04:00.620 に答える