0

ScrollToプラグインとLocalScrollプラグインを使用して、このサイトのアンカーナビゲーションに優れたスクロールを適用しています。

ユーザーがスクロールバーでスクロールするときに、常に正しいメニュー項目が強調表示されるようにしたいのです。

私はこの質問と回答を見てきましたが、うまく変更する方法がわからないのではないかと思います。（私のナビゲーションでは#about、#contactなどではなく#section、などを使用していますが、例のように各セクションになど#section2の名前を付けています）section1section2

この機能がデフォルトで付属しているOnePageNavigationプラグインも試しましたが、ドロップダウンメニューと競合します:(

これをお読みいただきありがとうございます。あなたが助けることができることを願っています！

4

1 に答える 1

0

#section1外部リンクを介してアクセスしているときと内部を介してアクセスしているときの両方で同じことを行うようにコードを一般化したい場合は、イベント<a href="#section1">Section 1</a>を聞くことができます。hashchangeスクロール中は更新されませんが、コードを一般化して再利用できるようにすれば、テクニックを簡単に組み合わせることができると確信しています。

Ben AlmanのjQueryhashchangeイベントプラグインを試して、同じ関数を呼び出すコールバックを追加してください。jQuery urlInternal：URLの内部、外部、またはフラグメント性を簡単にテストし、おそらくjQuery BBQ：戻るボタンとクエリライブラリ（これもBen Almanによる）と一緒に使用することをお勧めします。

これは、タブ行のさまざまなタブをアクティブ化するために同じ方法で使用するプロジェクトからすばやく適合させたコードです。（私は上記の3つのプラグインをすべて使用していますが、このスニペットにすべてのプラグインが必要だったかどうかは覚えていません。）

(function() {
    var menuLinksSelector = "#menu-main-menu a",
        menuLinkHighlightClass = "current";

    $.fn.extend({
        filterLinksToFragment: function(fragment) {
            var $this = $(this),
                $filtered = $this.filter("a:urlFragment").filter(function() {
                    var $this = $(this),
                        thisFragment = $.param.fragment($this.attr('href'));

                    return (thisFragment === fragment);
                });

            return $filtered;
        }
    });

    function highlightMenuItem(fragment) {
        var $menuLinks = $(menuLinksSelector),
            $selectedMenuLink = $menuLinks.filterLinksToFragment(fragment);

        $menuLinks.removeClass(menuLinkHighlightClass);
        $menuItem.addClass(menuLinkHighlightClass);
    }

    function highlightCurrentMenuItem() {
        var currentFragment = $.param.fragment();

        if (currentFragment !== undefined && currentFragment !== "") {
            highlightMenuItem(currentFragment);
        }
    }

    $window.on('hashchange', function() {
        // Activate the current URL's #part-anything link
        highlightCurrentMenuItem();
    });

    // Trigger the event (useful on page load).
    $window.hashchange();
}());

このコードを使用する場合は.click(...)、スクロール用のプラグインがあるため、クリックイベントをキャンセルする場合を除いて、質問にあるハンドラーを使用する必要はありません。

于 2012-09-05T17:08:31.980 に答える