Scrollspy突出显示两个目标

时间:2018-01-03 16:31:00

标签: jquery css twitter-bootstrap razor scrollspy

Scrollspy同时突出显示两个目标,这不是我想要的。我希望它只突出一个。它确实突出了一个,但是当在两个元素之间滚动时,它会突出显示两者。

Nav bar highlighting

CSHTML

var guid = Guid.NewGuid();
<script>
    $(function() {
        setupJumpNav("#@guid");
    });
</script>
<div>
    <div class="jump-container">
        <nav class="jump hide-on-small-only" style="top: 50px;" id="@guid">
            <ul class="section @(tabs.Count > 3 ? "center" : "")">
                @foreach (var tab in tabs)
                {
                    <li>
                        <a href="#@tab.Title.Replace(" ", "_").ToLower()">@tab.Title</a>
                    </li>
                }
            </ul>
        </nav>
    </div>
    <div class="socialMediaButtons socialMediaCentered"></div>
    <div class="container">
        @foreach (var tab in tabs)
        {
            <article class="col s12 section scrollspy" id="@tab.Title.Replace(" ", "_").ToLower()">
                @foreach (var contentItem in tab.RealContentItems)
                {
                    @Display(Model.ContentItem.ContentManager.BuildDisplay(contentItem))
                }
            </article>
        }
    </div>
</div>

JS:

(function() {
    setupJumpNav = function(guid) {
        var updatePushpin = function() {
            $(guid).pushpin("remove");
            var jumpTop = $(guid).parent().offset().top;
            $(guid).pushpin({
                top: $(".hide-on-med-and-down").css("display") !== "none" ? jumpTop - 25 : jumpTop,
                offset: $(".hide-on-med-and-down").css("display") !== "none" ? 75 : 50
            });
        };
        updatePushpin();
        $(window).bind("orientationchange resize", updatePushpin);
        $(guid).parent().parent().find(".scrollspy").each(function() {
            $(this).scrollSpy();
        });
    };
})(jQuery);

1 个答案:

答案 0 :(得分:0)

Scrollspy被多次调用。

   $(guid).parent().parent().find(".scrollspy").each(function() {
        $(this).scrollSpy();
    });

应该是

    $(guid).parent().parent().find(".scrollspy").scrollSpy();