Question

我正在搜索一个解决方案/函数，它会在点击导航项目时将“活动”类添加到导航项目中，或者如果页面滚动到其特定部分，并在单击其他菜单项时删除该类或滚动到页面的不同部分。我想出了这个：

    var listElement = $('#primary-navwrapper li');
    var offset = $('#header').outerHeight();



    listElement.find('a[href^="#"]').click(function(event) { 
        // Prevent from default action to intitiate
        event.preventDefault();

        // 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 = '!' + id;
            window.location.hash = anchorId;        
        });


    });

而且：

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

        $('#primary-navwrapper li a[href^="#"]').each(function() { 
            var anchorId = $(this);
            var target = $(anchorId.attr("href"));

// Here should be something, that is checking the position of the window or something, I think //

                    $('#primary-navwrapper li a').removeClass("current");
                    anchorId.addClass("current");
            }
        });
    }


    $(window).scroll(function() {
        //setActiveListElements();
    });

提前致谢

Answer 1

如果您的部分是100％身高，那么您可以尝试将fullPage.js与this example中的选项autoScrolling:false一起使用

注意滚动菜单的更新方式。它使用active类。

如何在滚动时突出显示导航的活动状态？

1 个答案: