21_스크롤메뉴 -each / offset().top / scrollTop()

$(function(){
   var $menu = $('#top_menu ul li'),
      $contents = $('#contents >div');
         console.log($menu);
          console.log($contents);

 

//menu를 클릭했을때

$menu.click(function(e){
e.preventDefault();

var idx = $(this).index();
console.log(idx);
        
        /*$menu.removeClass('on');
        $(this).addClass('on');
        */

var section = $contents.eq(idx);
console.log(section); //선택한것이 어떤contents앎
        
        var sectionDistance = section.offset().top;
        console.log(sectionDistance); //선택한 contetnts의 거리를 앎
        
        $('html,body').stop().animate({scrollTop:sectionDistance});
    
    }); //menu click 끝
    

//scroll 했을때
    $(window).scroll(function(){ 
        $contents.each(function(){
            if($(this).offset().top <= $(window).scrollTop()){  **이것의this는 contents이다.**
               var idx = $(this).index();
//                console.log(idx);
                
                $menu.removeClass('on');
                $menu.eq(idx).addClass('on');
            }
            
        });
    });//scroll 끝
});
//css

#top_menu ul li.on a { color:#000; font-weight:bold; }

 

정리

(정리하면서 하니 꽤 괜찮다.)

 

1. 스크롤대신.
클릭했을때 이동하는 버전만들기.

알아야할것.
-순번 알아내서 해당content
-각 섹션이 현재화면을 기준으로 상단에서의 거리를 구해서 
스크롤대신에 html.body에 넣어준다.
(각 섹션이 화면에서 얼마나 떨어졌는지 알아서 menu에 넣어준다.)

변수지정
-메뉴순번 알아야하니 메뉴
-내용이 와야하니 contents

1.클릭시 검정으로 바꾸기
2.메뉴 화면에서 떨어지는 거리구하기
-->내가 선택한 this 인덱스번호를 가져와서 내가 선택한것에서 화면상떨어진거리를 알아야한다.
막무가내로 컨텐츠의 offset().top;을 하면 콘솔에서 보면 다 0이 나온다.
그러겠지! 

3.선택한 contents거리 앎
 var sectionDistance = section.offset().top;

4.이번에는 ,
클릭해서 li가 on이 생기는게 아니라 스크롤했을때 on이 생기게해보자

self 내생각 땡! 오류-----------------------------------------
scrollTop()이용해서 
-->풀이 : li 순번을 이용해서 거리를 0으로 
--> li순번을 이용해서 offset().top을 0으로한다.

윈도우 스크롤탑이 (사용자가 스크롤) 문서가 화면상단으로부터의거리보다 클경우
해당 문서의 offset().top; 0 으로 하자.//--> 0이 아니고 아래

contents의 순번을 정해서 this라 하자. 

그 순번을 idx로 넣고 모든 li에 on을 삭제하고, 메뉴가 오면(순번) idx로 on을 추가하자.
-----------------------------------------------
contents마다 할일: -----each함수써야함

contents.each(function(){
   윈도우스크롤탑(사용자가 스크롤한값) >= 콘텐츠 offset().top { }
여기서 this는 content임
메뉴에 on을넣어서 색검정으로바뀜

$(window).scroll(function(){ 
        $contents.each(function(){
            if($(this).offset().top <= $(window).scrollTop()){
               var idx = $(this).index();
                $menu.removeClass('on');
                $menu.eq(idx).addClass('on');
            }
       });
    });