我已尝试过这里提供的几个脚本来突出显示滚动菜单项,但由于某些原因,他们都找不到我的.section id
。
var currentScroll = $(this).scrollTop();
// $currentSection is somewhere to place the section we must be looking at
var $currentSection
// We check the position of each of the divs compared to the windows scroll positon
$sections.each(function(){
// divPosition is the position down the page in px of the current section we are testing
var divPosition = $(this).offset().top;
// If the divPosition is less than the the currentScroll position the div we are testing has moved above the window edge.
// the -1 is so that it includes the div 1px before the div leave the top of the window.
if( divPosition - 1 < currentScroll ){
// We have either read the section or are currently reading the section so we'll call it our current section
$currentSection = $(this);
// If the next div has also been read or we are currently reading it we will overwrite this value again.
// This will leave us with the LAST div that passed.
}
// This is the bit of code that uses the currentSection as its source of ID
var id = $currentSection.attr('id');
$('a').removeClass('active');
$("[href=#"+id+"]").addClass('active');
})
});
});
经过一段时间的努力之后,我认为它可能因某种原因无法发现这些div
的ID。我能够将addClass
转到所有链接,但它无法找到相关的链接(&#34; [href =#&#34; + id +& #34;]&#34;)或a(&#34; [href =#&#34; + id +&#34;]&#34;) -
我在其中放了一个alert(id)
,它不会返回id值;它返回&#39; undefined&#39; ...
以下是nav
的构建方式:
<nav id="ubermenu-main-111" class="ubermenu ubermenu-nojs ubermenu-main ubermenu-menu-111 ubermenu-responsive ubermenu-responsive-1113 ubermenu-responsive-collapse ubermenu-horizontal ubermenu-transition-slide ubermenu-trigger-hover ubermenu-skin-none ubermenu-bar-align-full ubermenu-items-align-right">
<ul id="ubermenu-nav-main-111" class="ubermenu-nav">
<li id="menu-item-3328" class="ubermenu-item ubermenu-item-type-custom ubermenu-item-object-custom ubermenu-item-3328 ubermenu-item-level-0 ubermenu-column ubermenu-column-auto" >
<a class="ubermenu-target ubermenu-item-layout-default ubermenu-item-layout-text_only" href="#home" tabindex="0" data-ubermenu-scrolltarget="#home">...
和div.section
:
<div class="section mcb-section full-width menuitem " id="home">
我从CodePen得到了这个,但是我也尝试了几个,所有结果都相同......
任何?非常感谢......
答案 0 :(得分:-1)
这已经解决了 - 当我将它放在页面的不同部分时,该功能起作用。