Question

有一段时间，我正在尝试编写一个很好的工作单页导航，滚动到右侧锚点部分并在菜单中更新其当前状态。

我需要哪种功能？ - 处理click事件的函数：当用户点击锚链接时，它应滚动到该部分并更新菜单的当前状态。

滚动时摆脱活动状态的功能。

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

想出了这个：

// 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/

如果这是解决方案，请不要忘记单击勾选将此答案标记为正确答案。如果你想使用你当前的代码，那么我可以帮助你（只是评论下面，我会帮助你）但我真的认为这个插件是一个更容易的路线，但我不知道这是否是你所追求的效果。

如何创建单页导航？

1 个答案: