在滚动问题上突出显示菜单 - 没有使用scrollTop查找div id?

时间:2016-08-30 00:12:58

标签: javascript jquery scrolltop

我已尝试过这里提供的几个脚本来突出显示滚动菜单项,但由于某些原因,他们都找不到我的.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得到了这个,但是我也尝试了几个,所有结果都相同......

任何?非常感谢......

1 个答案:

答案 0 :(得分:-1)

这已经解决了 - 当我将它放在页面的不同部分时,该功能起作用。