Question

我在使用Affix和ScrollSpy的wordpress网站中构建自定义导航菜单（两者都是Bootstrap插件。）

我通过将代码粘贴到chrome js控制台来测试我的代码。 Affix工作正常，但ScrollSpy没有触发。

这里是JS我粘贴到控制台：

jQuery('body').css('position', 'relative');

jQuery('.menu-scrollspy-affix-test-container').attr('id', 'scrollspy-target').addClass('scrollspy');
jQuery('#menu-scrollspy-affix-test').addClass('nav');
jQuery('body').scrollspy({target: '#scrollspy-target'});

    jQuery('.nav').affix({
      offset: {
        top: 100,
        bottom: function () {
          return (this.bottom = jQuery('#footer').outerHeight(true))
        }
      }
    })

以上代码产生以下结果：

style="position: relative;"已添加到<body>代码
id="scrollspy-target"和class="scrollspy"已添加到ul菜单的父级（div.menu-scrollspy-affix-test-container）（ul#menu-scrollspy-affix-test）
class="nav＆＃34;已添加到导航菜单（ul#menu-scrollspy-affix-test）
data-spy="scroll"已添加到<body>
词缀代码适用于.nav。（词缀似乎完美无缺）

＆＃39;活跃＆＃39;当您滚动到页面中的相应锚点时，应该将类应用于导航菜单中的每个li。例如：

<div class="menu-scrollspy-affix-test-container">
    <ul id="menu-scrollspy-affix-test" class="menu"><li id="menu-item-12421" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12421"><a href="#intro">Intro Section</a></li>
        <li id="menu-item-12422" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12422"><a href="#section1">Section 1</a></li>
        <li id="menu-item-12423" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12423"><a href="#section2">Section 2</a></li>
        <li id="menu-item-12424" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12424"><a href="#section3">Section 3</a></li>
    </ul>
</div>
...
<h1 id="intro">Intro Text</h1>
<p>...</p>
<h1 id="section1"></h1>
<p>...</p>

etc...

然而，没有＆＃34;活跃＆＃34;正在应用课程。

我已经阅读了大约一百次的bootstrap文档，并做了一堆故障排除。只是不确定从哪里开始 - 似乎我已经按照说明进行了操作！

提前致谢！

ScrollSpy活动类不在导航菜单中触发

0 个答案: