个人中心
gpt4 book ai didi

javascript - ScrollSpy 与脚本添加了 id

转载 作者：行者123 更新时间：2023-12-03 08:03:34 27 4
gpt4 key购买 nike

首先，如果我重复其他地方发布的内容，我深表歉意。我一直在研究其他人为他们的问题找到的解决方案，并且我已经实现了(或者我认为)他们发现的东西，但我正在开发的网站仍然没有达到预期的效果。

所以，我正在处理的网站是 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 添加到类为“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;
        }
    }
}

当我查看网站代码时，这一切都会发生。
然后我使用以下命令刷新滚动 spy :

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

我收到日志消息，因此它应该已刷新。
根据我发现的一切，这应该可行。我已在正文中添加了“数据 spy ”和“数据目标”，因此我不需要暗示滚动条。我已经刷新了滚动 spy ，因此它已更新为添加了 ID 的脚本。...但事实并非如此。谁能帮我吗？

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

提前致谢。

最佳答案

所以我最终摆脱了 ScrollSpy 并使用 JQuery/JavaScript 作为自定义解决方案。我使用下一个停用功能从菜单中所有项目的类中删除“事件”

函数停用() { var menuItems = document.getElementsByClassName('菜单项');//侧边菜单中的所有 

  •     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,

    获取对象/ 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);

    将此最小值“切换”为每个 anchor 的“案例”(我有一个多语言网站，但不想重复太多，所以我对每种语言的正确菜单项使用“try catch”

        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;

        }

    });

    • 关于javascript - ScrollSpy 与脚本添加了 id，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34491439/

    27 4 0
    文章推荐： javascript - 使用 gsap 动画背景位置
    文章推荐： javascript - 消除某个 javascript 方法的所有实例的抖动
    文章推荐： javascript - 未捕获的语法错误 : Unexpected token ILLEGAL issue with markdown to HTML converter
    文章推荐： javascript - JQuery 自动完成 - 简单的母版页问题
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com