효과 탐색하기

Question

스크롤 할 때 div를 감지 할 수있는 방법이 있습니까? 사용자가 페이지의 다른 섹션 사이를 내려다 보았을 때 내 탐색 영역이로 설정된 옵션을 활성화하는 것으로 변경됩니다. HTTP : 같은 시간, //www.blacktie.co/demo/munter/

내가이 무료 platilla 알고 있지만, 코드 모든

Answer 1

$(document).scroll(function(e) { 
    delay(function() { 

     var tops = []; 

     $('.story').each(function(index, element) { 
      tops.push($(element).offset().top - 200); 
     }); 

     var scroll_top = $(this).scrollTop(); 

     var lis = $('.nav > li'); 

     for (var i=tops.length-1; i>=0; i--) { 
      if (scroll_top >= tops[i]) { 
       menu_focus(lis[i], i+1); 
       break; 
      } 
     } 
    }, 
    pause); 
}); 

에

감사를 이해하지 못하는

이 코드 부분이 가장 중요합니다. 이 함수는 script.js 파일 내에 있으며, 사용자가 웹 사이트를 스크롤 할 때마다 실행됩니다.

먼저는, 다음은 전체 페이지 물마루가는 이름 연산 상판과 배열을 생성하고 인스턴스의 "이야기"클래스

를 포함하는 각 요소의 상단에서 오프셋됩니다 :

<!-- === Slide 2 === --> 
    <div class="slide story" id="slide-2" data-slide="2"> 

or 

<!-- === SLide 3 - Portfolio --> 
<div class="slide story" id="slide-3" data-slide="3"> 

"scroll_top"이름의 변수가 만들어집니다. 이 변수는리스트 항목의 배열은 "var lis = $('.nav > li');는" 다음,이 실행하여 생성된다

다음 현재 위치의 상부로부터 오프셋 보유 루프에 대한 웹 페이지의 각 부분을 (검사 이는 대 목록 항목이 할당 됨). 아래에서 위로 (i--) 실행됩니다.

scrollTop (현재 오프셋)이 div 클래스의 "story"오프셋보다 크거나 같으면 해당 항목 위로 마우스를 가져 갔음을 의미합니다. 그곳에는 활성 상태로 있어야하는 목록 항목이므로 "menu_focus()"가 실행됩니다.

menu_focus 코드를 따르십시오.

function menu_focus(element, i) { 
    if ($(element).hasClass('active')) { 
     if (i == 6) { 
      if ($('.navbar').hasClass('inv') == false) 
       return; 
     } else { 
      return; 
     } 
    } 

    enable_arrows(i); 

    if (i == 1 || i == 6) 
     $('.navbar').removeClass('inv'); 
    else 
     $('.navbar').addClass('inv'); 

    $('.nav > li').removeClass('active'); 
    $(element).addClass('active'); 

    var icon = $(element).find('.icon'); 

    var left_pos = icon.offset().left - $('.nav').offset().left; 
    var el_width = icon.width() + $(element).find('.text').width() + 10; 

    $('.active-menu').stop(false, false).animate(
     { 
      left: left_pos, 
      width: el_width 
     }, 
     1500, 
     'easeInOutQuart' 
    ); 
} 

이 기능은 이미 동일한 활성 메뉴에 있는지 또는 마지막 메뉴 항목에 있는지를 먼저 확인합니다. 이 값이 true이면 반환되고 함수가 종료됩니다.

그러나 이것이 틀리면 (현재 활성 메뉴 항목을 변경해야하는 경우).

$('.nav > li').removeClass('active'); 
$(element).addClass('active'); 

활성 상태의 모든 목록 항목으로부터 제거하고 그것을 현재리스트 아이템에 추가된다 이는 다음 코드에 의해 수행된다.

코드의 마지막 부분은 목록 항목의 길이를 확인하고 그에 따라 줄을 만듭니다. 또한 $('.active-menu').stop(false, false).animate( 부분이 막대를 움직입니다. 즉, 다음 번으로 직접 건너 뛰지는 않겠지 만 천천히 움직입니다 (1500 밀리 초 걸림).

코드를 이해하는 데 도움이되기를 바랍니다. 그렇지 않다면 저에게 더 자세한 설명을 부탁드립니다!

인사말!