case 3 마지막 if 문

아아, 제가 질문하신 의도를 잘 못알아 들었네요 ㅎㅎ
scale 처리는 blend 처리가 끝난 후가 될테니.. 동작 이상이 없다면 말씀대로 해주셔도 좋을 것 같습니다^^
제가 코딩한게 정답은 아니므로 개선할 수 있는 부분이 있다면 얼마든지 더 개선하시면 좋고요! ㅎㅎ

아 두번째 조건문과 세번째 조건문 내용이 다르다는건 이해했습니다 선생님:-)

저는 그냥 혹시 제가 댓글로 작성한 코드처럼 두번째 if 문 안에 세번째 if문이 작성되면 문제가 생기는 지가 궁금해가지구요ㅎㅎ

case3 경우에는 순서가 순차적으로 이루어져있어서 if문 속에 if문을 넣어서 진행하는게 가능하다고 생각을 했습니닷....

두번째 if문에서 values.canvas_scale[2].end 값을 지정해주니, 두번째 if 함수 안에서 세번째 if절을 만들면

세번째 조건문에는 scrollRatio > values.canvas_scale[2].end 이렇게만 적어줘도 실행이 되는 것 같아보여서요:)

if (scrollRatio > values.canvas_scale[2].end) {
    //console.log('스크롤시작')
    objs.canvas.classList.remove('sticky');
    objs.canvas.style.marginTop = `${scrollHeight * 0.4}px`;                           
}

두번째 조건은 blendHeight랑 비교를 하는 것이고,
세번째 조건은 canvas_scale이랑 비교를 하는건데 혹시 같은 조건으로 잘못 보신게 아닐까 싶어요~^^;
아니면 제가 질문을 잘못 이해한걸까요?

//캔버스가 브라우저 상단에 닿지 않았다면
                if (scrollRatio < values.rect1X[2].end) {
                    step = 1;
                    //console.log('캔버스 닿기 전');
                    objs.canvas.classList.remove('sticky')
                } else {
                    step = 2;
                    //console.log('캔버스 닿은 후');
                    //이미지 블렌드
                    //imageBlendY: [0, 0, {start: 0, end: 0}]
                    values.blendHeight[0] = 0;
                    values.blendHeight[1] = objs.canvas.height;
                    values.blendHeight[2].start = values.rect1X[2].end;
                    values.blendHeight[2].end = values.blendHeight[2].start + 0.2;
                    const blendHeight = calcValues(values.blendHeight, currentYOffset);
                    
                    
                    //objs.context.drawImage(img, sx, sy, swidth, sheight, dx, dy, dwidth, dheight);
                    objs.context.drawImage(objs.images[1],
                        0, objs.canvas.height - blendHeight, objs.canvas.width, blendHeight,
                        0, objs.canvas.height - blendHeight, objs.canvas.width, blendHeight
                    ); //canvas와 img크기가 동일하기 때문에 변수 동일 사용
                    
                    objs.canvas.classList.add('sticky');
                    objs.canvas.style.top = `${-(objs.canvas.height - objs.canvas.height * canvasScaleRatio) / 2}px`
                    
                    if (scrollRatio > values.blendHeight[2].end) {
                        //console.log('축소 시작!')
                        values.canvas_scale[0] = canvasScaleRatio;
                        values.canvas_scale[1] = document.body.offsetWidth / (1.5 * objs.canvas.width);
                        values.canvas_scale[2].start = values.blendHeight[2].end;
                        values.canvas_scale[2].end = values.canvas_scale[2].start + 0.2;
                        
                        objs.canvas.style.transform = `scale(${calcValues(values.canvas_scale, currentYOffset)})`;
                        objs.canvas.style.marginTop = 0;
                        
                        if (scrollRatio > values.canvas_scale[2].end) {
                            //console.log('스크롤시작')
                            objs.canvas.classList.remove('sticky');
                            objs.canvas.style.marginTop = `${scrollHeight * 0.4}px`;
                            
                        }
                    }
                    
                    //if (scrollRatio > values.canvas_scale[2].end 
                    //    && values.canvas_scale[2].end > 0) {
                    //    console.log('스크롤시작');
                    //    objs.canvas.classList.remove('sticky');
                    //    objs.canvas.style.marginTop = `${scrollHeight * 0.4}px`;
                    //}
                }