Jquery[제이쿼리] offset() + scrollTop()로 상단메뉴고정 하기

안녕하세요~ 주니주니 입니다.

오늘은  제이쿼리[jquery] offset() + scrollTop()로 상단메뉴고정을 해보겠습니다.

이렇게 준비해주세요~

처음 실행 화면입니다. 검정색부분이 메뉴라고 생각하세요~

마우스휠로 내리니 메뉴부분이 안보이네요 ㅠ.ㅠ

===============================
$(window).scroll(function(){
   var d1_offset = $('.d1').offset();
   alert("offset_top: "+d1_offset.top+" offset_left: "+d1_offset.left);
===============================
브라우저창 대상으로 스크롤을 하면
class d1의 offset()메서드의 리턴값을 변수 d1_offset 에 담아 
alert()메서드로 값을 확인할수있도록 하였습니다. 
※offset()메서드는 어제 배워서 다들 아시죠? ㅎㅎ

※주의!! 스크롤을 너무많이 내리시면 창이 너무많이떠요 ㅠㅠ
값을 확인해보시면 알겠지만 아래로 내려갈수록  offset_top의 값이 0보다 작아지는것을
확인할수있답니다.

=============================== 
alert($(window).scrollTop());
===============================
이번에는 브라우저창의 scrollTop()값을 확인 해보도록 해볼께요.
※scrollTop()메서드역시 2일전에 배웠답니다.^ㅡ^/

※주의!! 스크롤을 너무많이 내리시면 창이 너무많이떠요 ㅠㅠ
스크롤로 내릴때마다 값이 올라가네요!!

이제 메뉴부분이 계속보이기 위해서 코딩을 해볼께요!
=============================== 
if($(window).scrollTop() >= d1_offset.top){
    $('.d1').css("top",0).css("position","fixed");
   }
=============================== 
d1_offset.top의값이  $(window).scrollTop() 값보다 작거나 같을경우
$('.d1').css("top",0).css("position","fixed"); <== 이부분이 실행된답니다.
class이름이 d1즉 메뉴부분이겠죠? top 위치값을 0으로 position은 fixed로 바꾼다는 뜻입니다.
css변경 부분은 초반에 했기때문에 아실꺼라고 생각해요.

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
위에부분이 정석이지만 아까 값을 확인하면서 본결과 스크롤을 내리면 
d1_offset.top의값은 0보다작아지고
$(window).scrollTop()의값은 0보다 커지는것을 확인할수 있었어요!!!

그래서 저는
=============================== 
if(0 >= d1_offset.top){
    $('.d1').css("top",0).css("position","fixed");
   }
=============================== 
이렇게 해보았답니다ㅎㅎㅎ

스크롤을 내려도!!!
메뉴부분이 상단에 위치하네요 ㅎㅎ
오늘은  제이쿼리[jquery] offset() + scrollTop()로 상단메뉴고정을 해보았습니다.
그럼 다음에 또만나요~