jquery - Scrollspy 突出显示两个目标

标签 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);

最佳答案

Scrollspy 被调用不止一次。

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

应该是

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

关于jquery - Scrollspy 突出显示两个目标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48081381/

相关文章:

jquery - 使用 fullpage.js 滚动到新 anchor 时移动导航

php - Contenteditable div 高度限制

CSS 优先级搞砸了

jquery - 一起使用 jQueryMobile 和 bootstrap

css - 在 Bootstrap 中创建响应式卡片组

javascript - 如何在用户滚动页面时触发图像移动?

javascript - 更改 url 不会更改所选的选项卡

php - WordPress 子主题包括包含文件

html - 如何将图像添加到github网站上的导航栏

jquery - 使用 jquery/css 淡出 Bootstrap 模式