带有脚本添加 ID 的 ScrollSpy

Question

首先，如果我重复在别处发布的任何内容，我深表歉意。我一直在研究其他人为他们的问题找到的解决方案，并且我已经实施（或者我认为）他们发现的东西但是我正在工作的网站仍然没有做它应该做的事情。

因此，我正在处理的站点是 http://www.vinck-interieur.be/?lang=en。
应该发生的是，当向下或向上滚动时，访问者会看到他们在侧边栏菜单中的位置。 ScrollSpy 似乎是执行此操作的最佳选择，但自从我将其放入我的代码以来，它一直没有工作。我邀请您查看我放在我网站上的代码，但这是主要思想

<body id="top" <?php body_class(); ?> data-spy="scroll" data-target=".navigation-bar">
    <header id="header" class="...">
        <div class="bottom-head">
            <nav id="access" role="navigation" class="navigation-bar>
                <div class="menu-container loaded">
                    <ul id="menu-main-menu-en" class="top-menu">
                        <li id="menu-item-672" class="menu-item menu-item-custom menu-item-object-custom menu-item-672 normal-menu">
                            <a href="#top"><span>home</span></a>
                        </li>
                        ...
                    </ul>
                </div>
            </nav>
        </div>
    </header>

    <div id="mid" class="...">
        <article id="content" class="clearfix">
            <div id="col-mask">
                <div id="post-632" class="...">
                    <div class="real-content">
                        <div class="a13_row_container lift-up" style="...">...</div>
                        <div class="a13_row_container a13_full_row a13_full_content" style="...">...</div>
                        <div class="a13_row_container lift-up" style="...">...</div>
                        <div class="a13_row_container a13_full_row a13_full_content" style="...">...</div>
                        <div class="a13_row_container lift-up" style="...">...</div>
                        <div class="a13_row_container a13_full_row a13_full_content" style="...">...</div>
                        ...
                    </div>
                </div>
            </div>
        </article>
    </div>

在我的页脚之后，我首先添加 jQuery，然后调用 Bootstrap，然后使用 JS 为每个第二个元素添加某些 ID，其中 class 为 "a13_full-row" :

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/bootstrap.min.js"></script>
<script>
    var rows = document.getElementsByClassName("a13_full-row");

    for (var i = 0; i < rows.length; i+=2) {
        switch(i) {
            case 0:
                rows[i].setAttribute("id", "home");
                break;
            case 2:
                rows[i].setAttribute("id", "ontwerp");
                break;
            case 4:
                rows[i].setAttribute("id", "project");
                break;
            case 6:
                rows[i].setAttribute("id", "advies");
                break;
            case 8:
                rows[i].setAttribute("id", "portfolio");
                break;
            case 10:
                rows[i].setAttribute("id", "contact");
                break;
        }
    }
}

当我查看网站代码时，这一切都发生了。
然后我刷新滚动间谍使用：

<script>
jQuery('[data-spy="scroll"]').each(function () {
            if(jQuery(this).scrollspy('refresh')) {
                console.log("yay");
            }
        });
<script>

我收到了日志消息，所以它应该已经刷新了。
根据我发现的一切，这应该可行。我已将 "data-spy" 和 "data-target" 添加到正文中，因此我不需要暗示滚动条。我刷新了 scroll spy，所以它会更新为脚本添加的 ID。 ... 但事实并非如此。谁能帮帮我？

如果需要更多代码，我很乐意提供。

提前致谢。

Answer 1

所以我最终摆脱了 ScrollSpy 并使用 JQuery/JavaScript 作为自定义解决方案。我使用下一个停用功能从菜单

中所有项目的 class 中删除 'active'

功能停用（）{ var menuItems = document.getElementsByClassName('menu-item'); // 侧边菜单中的所有

    for (var i = 0; i < menuItems.length; i++) {
        var menuLinks = menuItems[i].childNodes; // All <a> in <li> in side menu
        var tempClass = document.getElementById(menuItems[i].id).className.replace(/active/gi, ''); // replace 'active' by ''
        menuItems[i].className = tempClass;
    }
}

每次用户滚动时调用未命名的函数：

jQuery(document).on('scroll',function() {

使用 'scrollTop()' 获取您查看的内容相对于页面顶部的偏移量。使用 'offsetTop' 获取该对象到页面顶部的偏移量。

    var scrollTop = jQuery(window).scrollTop(), // Position on the page of the top of your window (page offset)
    homeOffset = document.getElementById("home").offsetTop, // The offset this element has on the page compared to the top (object offset)
    ontwerpOffset = document.getElementById("ontwerp").offsetTop,
    projectOffset = document.getElementById("project").offsetTop,
    adviesOffset = document.getElementById("advies").offsetTop,
    portfolioOffset = document.getElementById("portfolio").offsetTop,
    contactOffset = document.getElementById("contact").offsetTop,

获取 object/anchor 与您正在查看的内容的顶部的距离，并使用 'Math.abs()' 使其成为绝对值。

    distHome = Math.abs((homeOffset - scrollTop)), // Absolute value(object offset - page offset)
    distOntwerp = Math.abs((ontwerpOffset - scrollTop)),
    distProject = Math.abs((projectOffset - scrollTop)),
    distAdvies = Math.abs((adviesOffset - scrollTop)),
    distPortfolio = Math.abs((portfolioOffset - scrollTop)),
    distContact = Math.abs((contactOffset - scrollTop));

记录第二个检查。

    console.log("ontwerp: " +distOntwerp);

获取所有偏移量中最小的值并记录下来检查

    var minOffset = Math.min(distHome, distOntwerp, distProject, distAdvies, distPortfolio, distContact); // The smallest value of them all
    console.log("min: " + minOffset);

'switch' 每个锚点的最小值 'case' （我有一个多语言网站，但不想重复太多所以我使用 'try catch' 作为权利menu-item 每种语言

    switch (minOffset) {
        case distHome:
            deactivate();
            try{
                document.getElementById("menu-item-671").className += ' active';
            } catch(e) {}
            try{
                document.getElementById("menu-item-672").className += ' active';
            } catch(e) {}
            try{
                document.getElementById("menu-item-673").className += ' active';
            } catch(e) {}
            break;
        case distOntwerp:
            deactivate();
            try{
                document.getElementById("menu-item-54").className += ' active';
            } catch(e) {}
            try{
                document.getElementById("menu-item-657").className += ' active';
            } catch(e) {}
            try{
                document.getElementById("menu-item-663").className += ' active';
            } catch(e) {}
            break;
        case distProject:
            deactivate();
            try{
                document.getElementById("menu-item-59").className += ' active';
            } catch(e) {}
            try{
                document.getElementById("menu-item-658").className += ' active';
            } catch(e) {}
            try{
                document.getElementById("menu-item-664").className += ' active';
            } catch(e) {}
            break;
        case distAdvies:
            deactivate();
            try{
                document.getElementById("menu-item-56").className += ' active';
            } catch(e) {}
            try{
                document.getElementById("menu-item-659").className += ' active';
            } catch(e) {}
            try{
                document.getElementById("menu-item-665").className += ' active';
            } catch(e) {}
            break;
        case distPortfolio:
            deactivate();
            try{
                document.getElementById("menu-item-57").className += ' active';
            } catch(e) {}
            try{
                document.getElementById("menu-item-660").className += ' active';
            } catch(e) {}
            try{
                document.getElementById("menu-item-666").className += ' active';
            } catch(e) {}
            break;
        case distContact:
            deactivate();
            try{
                document.getElementById("menu-item-58").className += ' active';
            } catch(e) {}
            try{
                document.getElementById("menu-item-661").className += ' active';
            } catch(e) {}
            try{
                document.getElementById("menu-item-667").className += ' active';
            } catch(e) {}
            break;

    }

});

带有脚本添加 ID 的 ScrollSpy

ScrollSpy with script added ids

javascript

scrollspy