如何将jquery-scrollspy库与带有ID的body标签一起使用？

Question

我使用the jquery-scrollspy library。对于简单的情况，它很好用。但是我希望我的一个网站上的“主页”链接滚动到顶部，并在滚动到第二部分时发送onLeave信号。

因此，网站具有以下部分（例如）：

1. body#home
2. section[data-scrollspied]#music
3. section[data-scrollspied]#other

和我要使用的代码是这样：

(function ($) {
    $(function () {
        var $links = $("a[href^='#']");

        $('body, section[data-scrollspied]').each(function() {
            var $this = $(this);
            var position = $this.position();

            var start = position.top;
            var end = position.top + $this.height();

            if ($this.is("body")) {
                end = $("section[data-scrollspied]:first").position().top;
            }

            $this.scrollspy({
                min: start,
                max: end,
                onEnter: function(element /*, position*/ ) {
                    $('a[href="#' + $this.attr("id") + '"]').addClass("active");
                },
                onLeave: function(element /*, position*/ ) {
                    $('a[href="#' + $this.attr("id") + '"]').removeClass("active");
                }
            });
        });

        $links.on("click", function () {
            //setTimeout(function () {
                $links.removeClass("active");
                $(this).addClass("active");
            //}, 500);
        });
    });
})(jQuery);

如您所见，它很丑陋，并且使用了一些技巧，而且即使在网站上也无法使用，也无法按照我想要的方式工作。它唯一的问题是，在页面加载时，滚动到页面顶部的第一个链接未设置为活动状态。

该示例不符合我想要的body标记，但在其他情况下效果很好，位于this JSFiddle。

如果有帮助，我可以使用另一个scrollspy库。

谢谢！

Answer 1

我只需要在初始HTML中将active类放在#home链接上，一切就可以正常工作。