2016-08-30 6 views
-2

스크롤에서 메뉴 항목을 강조하기 위해 여기 제공된 여러 스크립트를 시도했지만 어떤 이유로 든 내 .section id을 찾을 수 없습니다.강조 표시 - scrollTop으로 div 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을 가져올 수 있지만 ""[href = # "+ id +"] ") 또는 ("[href = # "+ id +" ] ") -

여기에 alert(id)을 넣었습니다. id 값을 반환하지 않습니다. 그것은

은 여기 내 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

나는 함수의이 부분을 놓친 (.section)); // 사용자가 스크롤 $ (창) .scroll (function() { –

+0

대답의 코드에 해당 코드를 추가하는 것을 잊었습니까?이 코드를 포함하도록 답변을 편집 할 수 있습니까? – Xetnus

+0

아니, 내 질문에 그 코드를 추가하는 것을 잊었다. 그 대답이 아니었다. 고마워요, 토 ... –

답변

-1

이 문제가 해결되었습니다 - 페이지의 다른 부분에 배치했을 때 기능이 작동했습니다. > $ (문서) .ready (함수() { // $ 섹션 메뉴 항목과 관련된 컨테이너 div의 모든 incleudes var에 $ 섹션 = $ (-.