[JQUERY] jQuery를 트리거 사업부의 2 / 3 초 뷰포트에

jQuery를 트리거 사업부의 2 / 3 초 뷰포트에

해결법

1. ---

   1.시험

   시험

   var page = $(".page")
   , menu = $("#menu");
   $(window).on("scroll", function (e) {    
       var res = $.grep(page, function (el) {
           return el.getBoundingClientRect().top <= 180 && (el.getBoundingClientRect().bottom >= 180)
      });
       var id = res.slice(-1)[0].id;  
       menu.find("." + id)
       .addClass("active")
       .siblings()
       .removeClass("active")   
   }).scroll();
   

   jsfiddle http://jsfiddle.net/kwbddvau/8/

   VAR 페이지 = $ ( ". 페이지") 메뉴는 $ ( "# 메뉴") =; $ (창) CSTE 연구진 ( "스크롤"기능 (전자) { VAR 고해상도 = $ .grep (페이지, 기능 (엘) { 창 el.getBoundingClientRect (). 가기 <= 180 && (el.getBoundingClientRect (). 하단> = 180) }); VAR 자료 res.slice = (-1) [0] .ID; menu.find ( "."+ ID) .addClass ( "능동") .형제 자매() .removeClass ( "능동") }).스크롤(); HTML { 높이 : CALC (100 % - 100 픽셀) 중요한;! 폭 : 100 % 중요한;! 여백 : 0 픽셀; 패딩 : 0 픽셀; } 신체 { 높이 : 500 % 중요한;! 폭 : 100 % 중요한;! 여백 : 0 픽셀; 패딩 : 0 픽셀; } .page { 높이 : 20 % 중요합니다;! 폭 : 100 % 중요한;! } #페이지 1 { 배경 색상 : 레드, 여백 - 상단 : 100 픽셀; } # PAGE3 { 배경 색상 : 녹색; } # page5 { 배경 색상 : 블루; } #menu { 폭 : 100 %; 높이 : 100 픽셀; 색상 : #fff; 배경 색상 : 검정; 위치 : 고정; 최고 : 0 픽셀 } .active는 { 국경 바닥 : 2 픽셀 빨간색으로; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

   <스팬 클래스 = "PAGE1"메뉴> <스팬 클래스 = "페이지 2"> MENU <스팬 클래스 = "PAGE3"메뉴> <스팬 클래스 = "page4"메뉴> <스팬 클래스 = "page5"메뉴>

   PAGE1

   페이지 2

   PAGE3

   page4

   page5

from https://stackoverflow.com/questions/29140800/jquery-trigger-when-2-3s-of-div-are-in-viewport by cc-by-sa and MIT license