Question

我正在使用ScrollTo和LocalScroll插件将精彩滚动应用于this site上的锚定导航。

我想要的是在用户使用滚动条滚动时始终突出显示正确的菜单项。

我已经看到了这个question and answer，但我担心我无法弄清楚如何成功修改它！（我的导航使用#about，#contact等而不是#section，#section2等，但我为每个部分命名为section1，{{1}像示例中那样）

我也尝试过这个功能附带的One Page Navigation插件是默认的，但它与我的下拉菜单有冲突：（

感谢您花时间阅读本文。希望你能帮忙！

Answer 1

如果您想要通过外部链接访问#section1以及通过<a href="#section1">Section 1</a>内部访问来概括代码以执行相同的操作，则可以收听hashchange事件。滚动时它不会更新，但如果你推广代码并使其可重用，我相信这些技术很容易组合。

尝试Ben Alman's jQuery hashchange event plugin并添加一个调用相同函数的回调。您可能希望将其与jQuery urlInternal: Easily test URL internal-, external-, or fragment-ness以及jQuery BBQ: Back Button & Query Library一起使用，也可以与Ben Alman一起使用。

这是一些代码，很快就从一个项目中改编而来，我以相同的方式使用它来激活标签行中的不同标签。（我使用上面提到的所有三个插件，但我不记得这个片段是否都是必需的。）

(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(...)处理程序，除非取消单击事件，因为您有用于滚动的插件。

使用ScrollTo和LocalScroll插件时突出显示菜单项

1 个答案: