1. 타겟

💡 금일 타겟 → 모바일 스크립트 완성

2. 과정

• position: fixed 적용시 overflow가 적용안됨
  • fixed시 부모의 사이즈값을 상속받지 않으므로 기본 너비값이 자식 요소의 너비만큼 적용됩니다. 기존 div의 자식의 ul이 넘쳐서 오버플로우가 적용되었다가 fix가 되면서 넘치지 않고 브라우저 윈도우에 가려지게 되었습니다. div에 width값을 주어 overflow 가 적용되도록 수정하였습니다,
• if 문 경우의 수 순서 반대로 해야함.

/* 기존: if문 경우의 수 순서 고려안하여 수정 */
            $(window).scroll(function(){
            var sc = $(window).scrollTop();
            console.log(sc);/*2350 static*/
            if(sc >= 148){  /* 경우의 수 적은 것 부터 시작해야함.*/
                $(".nav_loc").css({"position":"fixed","background":"#fff"});
                $(".top .blank").css({"height":116});
                $(".nav_loc li").eq(0).addClass("under")
            }else if(sc >= 440){
                $(".nav_loc li").removeClass("under").eq(1).addClass("under")
            }else{
                $(".nav_loc").css({"position":"static","background":"none"});
                $(".top .blank").css({"height":60});
                $(".nav_loc li").removeClass("under")
            }

• ul 스크롤 이동에 관한 상대좌표와 절때좌표 사용 구별
  • position(), offset() 처음에 ul에 offset을 사용하였는데 움직이면서 offset 값이 변경되어 왔다갔다하는 움직임을 보였습니다. position으로 수정하여 해결하였습니다.
• 왜 CSS로 수정하면 잘 되는데 animate가 적용안될까? 스크롤하고 시간이 한참 지나면 한두칸씩 움직인다.
  • stop()을 넣으니깐 적용이 되었다. 그런데 약간씩 뚝뚝 거리면서 움직인다. 스크롤할 때마다 효과가 적용되다 보니깐 애니메이트 시간이 축적되었던 것 같다.
  • position: relative 상태에서 left 값을 사용하자 이동한 왼쪽으로는 스크롤이 안된다,

var l_mo = $(".nav_loc li").eq(l_no).position().left;
            console.log(l_mo);/* 초기 숫자 값이 없어서 오류뜸*/
            $(".nav_loc li").removeClass("under").eq(l_no).addClass("under").parent("ul").animate({"left":-l_mo}, 500);
/* left값은 스크롤이 적용되지 않아 scrollLeft를 사용하였습니다.*/

• scrollLeft 함수를 이용해서 적용하여 해결하였습니다. position 이동한 값을 overflow 적용하는 방법이 있는지는 강사님께 추가적으로 확인해보겠습니다.
  • $(".nav_loc").stop().animate({scrollLeft : l_mo},300);

3. 피드백

• if문 작성시 경우의 수 순서 고려하여 작성하기
• position(), offset() 차이 리마인드

3. 결과

• 스크롤시 헤드 움직임 구현 완료
• 헤드 li 클릭시 윈도우 스크롤 이동 필요