알고리즘 by. 강사님

a hover
1. 배경의 왼쪽 좌표 구함
2. 앵커의 너비 구함
3. 관련서브메뉴 보여짐
4. 관련서브메뉴의 높이값을 구해서 헤더의 높이를 지정

배경이 양쪽으로 작아짐 → width값이 주는 동시에 줄어드는 방향으로 이동

문제점 (헤드 애니메이션)

• 기존 커질때는 한쪽으로 작아질 때는 양쪽으로
• 이동하면서 좌우로 커짐. 같은 위치에는 적용이 되나 위치가 바뀔 때는 커지는 모습을 볼 수 없음. → 딜레이가 필요함.
• 현재 css 트랜지션을 준 상태. → css속성은 순서 불가
• 애니메이션으로 사이즈 css로 좌표를 설정하면 초기값을 잘되나 이후 좌표가 이상해짐.

해결

1. 움직임을 .css() 를 사용하여 먼저 적용되도록 설정 후, transition값으로 동적효과를 줌.
2. <li> 사이사이 지날 때 생기는 문제는 padding값으로 바꾸어 접혔다 펼져지는 상황이 생기지 않도록 함.
3. 여러번 움직였을 때 사이즈가 계속 바뀌는 문제는 .stop() 메소드로 해결

<script>
        var n;
        var lp, lw;
$("#stiker .menu li").hover(function(){
            lp = $(this).position().left;
            lw = $(this).width(); //노란띠 사이즈 설정 
            console.log(lp,lw);
            $("#stiker .wrap > i").css({"left":lp,"width":lw});
        },function(){
            var lph = lw / 2 + lp;
            $("#stiker .wrap > i").css({"left":lph,"width":0});
            console.log(lw);
        })
    </script>

.offset()

[상대좌표 절대좌표]

상대적인 좌표위치 확인함수, position()

! 절대좌표 확인 및 이동함수 : offset()

헤드 최종

<script>
        var n;
        var lp, lw, lph;
        $("#stiker .menu li").hover(function(){
            /*기존 스크립트*/
            /*n = $(this).index();
            var move = n * 75;
            //console.log(n);
            $("#stiker .wrap > i").css({"display":"block"}).stop().animate({"left":move},200);
            $(".part" +(n + 1)).stop().slideDown(300);
            $(".curtain").addClass("modal")*/
            
            /* 강사님 스크립트 */
            n = $(this).index(); //순번
            lp = $(this).position().left - 5; //li 위치 -> 노란띠 이동 
            lw = $(this).width()+10; // 노란띠 사이즈
            dnb_h = $(".part" +(n + 1)).height(); // 디테일바 높이
            console.log(dnb_h)
            $(".dnb > div").css({"display":"none"});
            $("#stiker .wrap > i").css({"left":lp}).stop().animate({"width":lw},200);
            $(".part" +(n + 1)).css({"display":"block"}).animate({"height":dnb_h},1000);
            $(".curtain").addClass("modal");
        },function(){
            
            
          /*   기존스크립트 */
        /*$("#stiker .wrap > i").css({"display":"none"});
        $(".part" +(n + 1)).stop().slideUp(200);
        $(".curtain").removeClass("modal");*/
        })
        // mouseleave 전체 설정
        $("#stiker").on("mouseleave", function(){
            $(".part" +(n + 1)).css({"display":"none"});
            $(".curtain").removeClass("modal");
            var lph = lw / 2 + lp; //양쪽으로 작아지기 위한 이동
            $("#stiker .wrap > i").css({"left":lph,"width":0});
        })
        
        /* 헤드 fixed*/
        $(window).scroll(function(){
        var loc = $(window).scrollTop();
        console.log(loc)
        if(loc >= 60){
            $("header").css({"position":"fixed","top":"-60px"})
        }else{
            $("header").css({"position":"absolute","top":0})
        }
        })

    </script>