jquery - 如何创建单个页面导航？

Question

有一段时间，我一直在尝试编写一个很好用的单页导航，它可以滚动到右侧的 anchor 部分并在菜单中更新他的当前状态。

那么我需要什么样的功能呢？- 处理点击事件的函数:当用户点击 anchor 链接时，它应该滚动到该部分并更新菜单的当前状态。

• 在滚动时摆脱事件状态的函数。

除此之外，我还使用了固定 header 。因此标题的高度应减去滚动位置以避免粘性标题重叠内容。

想到了这个:

// An offset to push the content down from the top
    var offset = $('#header').outerHeight();




    $('#primary-navwrapper').find('li a[href^="#"]').click(function(event) { 

        // Current class switch
        $(this).removeClass("current");
        $(this).addClass("current");


        // The id of the section we want to go to.
        var anchorId = $(this).attr("href");


        // Our scroll target : the top position of 
        // the section that has the id referenced by our href.
        var target = $(anchorId).offset().top - offset;         
        //console.log(target);


        $('html, body').animate({ scrollTop: target }, 500, function () {
            window.location.hash = anchorId;        
        });


        // Prevent from default action to intitiate
        event.preventDefault();
        return false;

    });

function setActiveListElements(event) {

        // Get the offset of the window from the top of page
        var windowPos = $(window).scrollTop();

        $('nav li a[href^="#"]').each(function() { 
            var currentId = $(this);
            console.log(this);

            // if for active
            var target = currentId.attr("href");
            console.log(target);

            var offsetTop = target.position().top - offset;
            //var offsetBottom = offsetTop + target.height();

            if (target.length > 0) {
                console.log(target.position().top + target.height());
                if (target.position().top - offset <= windowPos && target.position().top + target.height() > windowPos) {
                    $('#primary-navwrapper li a').removeClass("current");
                    $(this).addClass("current");
                }
            }

        });

    }

它将滚动到它的位置，但不会更新当前状态。除此之外，我还尝试更新滚动 URL 中的散列，但不知道如何完成此操作。

此外，如果这可以更短和更好地编码，我也不反对，所以欢迎提出建议:)

Answer 1

查看这个名为 SMINT 的 jQuery 插件。我认为这就是您所追求的。

http://www.outyear.co.uk/smint/

如果这是解决方案，请不要忘记通过单击勾号将此答案标记为正确答案。如果你想使用你当前的代码，那么我可以帮助你(只需在下面发表评论，我会帮助你)但我真的认为这个插件是一个更简单的途径，但我不知道这是否是你想要的效果。