首先，如果我重复在其他地方发布的任何内容，我很抱歉。我一直在研究其他人为他们的问题找到的解决方案，我已经实现了（或者我认为）他们找到的东西，但我正在研究的网站仍然没有做到它应该是什么。
因此，我正在处理的网站是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，类为＆＃34; a13_full-row＆＃34;：
<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>
我收到日志消息，因此它应该已刷新。
根据我发现的一切，这应该有效。
我已添加＆＃34;数据间谍＆＃34;和＆＃34;数据目标＆＃34;对身体所以我不需要暗示滚动条。
我已经刷新了滚动间谍，因此它更新了脚本添加的ID。
...
但它并没有。
任何人都可以帮助我吗？
如果需要更多代码，我很乐意提供。
提前致谢。
答案 0 :(得分：1)
所以我最终摆脱了ScrollSpy，并使用JQuery / JavaScript作为自定义解决方案。我使用下一个停用功能从菜单中所有项目的类中删除“活动”
function deactivate（）{ 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,
使用'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);
'切换'这个最小值到每个锚点的'case'（我有一个多语言网站，但不想重复自己，所以我在每种语言中使用'try catch'来获得正确的菜单项< / p>
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;
}
});