0

我正在使用ScrollTo和LocalScroll插件来应用漂亮的滚动来锚定此站点上的导航。

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

这个问题和答案我看过了，但我怕我无法弄清楚如何成功修改它！（我的导航使用#about, #contactetc 而不是#section, #section2etc，但我给每个部分取了一个section1, section2etc 的名称，就像示例中一样）

我还尝试了默认附带此功能的One Page Navigation插件，但它与我的下拉菜单冲突:(

感谢您抽时间阅读。希望你能帮忙！

4

1 回答 1

0

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

试试Ben Alman 的 jQuery hashchange 事件插件并添加一个调用相同函数的回调。您可能希望将它与jQuery urlInternal 一起使用：轻松测试 URL 内部、外部或片段性，也许还有jQuery BBQ：返回按钮和查询库，同样由 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(...)问题中的处理程序，除非可能取消单击事件，因为您有滚动插件。

于 2012-09-05T17:08:31.980 回答