초기화 함수, 100% 만드는 방법

이해가 안간다면  init() 함수를 주석으로 막아 실행되지 않게하고

페이지 중간쯤가서 새로고침을 해보세요 :)

쉽게 이해가 갈겁니다 :)

안녕하세요 Youngjae Choi님 :)

1.스크롤 이벤트를 바인드 한다는 말을 쉽게 얘기하자면 

$(window).scroll(function(){

getPercent();

}

$(window).scroll(function(){ 이 스크롤 이벤트를 추가해 준다고 생각하시면 될 것 같습니다.  다음과 같이 스크롤 이벤트를 추가해주고 이벤트 안에 스크롤 할 때 필요한 함수를 적어주게 되면 사용자가 스크롤을 할 때 마다 getPercent() 함수가 호출되겠죠?

2. 페이지가 로드 될 때 사용자의 스크롤위치에 따라서 웹페이지의 스크롤 위치는 달라집니다 ( 예를들어 페이지를 보다가 새로고침 할 경우 )

예를들어 가정해 보겠습니다. 최초 페이지가 로드 됐을때 사용자가 마우스 스크롤을 하지 않은 상황에서

init함수를 실행하지 않아 getPercent() 함수가 실행되지 않았고

페이지가 중간부터 로드 되었다면? 화면은 오류가 난 것 처럼 보일겁니다.

예제를 기준으로 얘기하자면 화면은 중간에서 로드 되었지만 퍼센트가 0%로 되어 있을겁니다 

정상적이라면 예제의 페센트는 50%까지 나와야 되는겁니다 :)

다음과 같이 말이죠!

그렇기에 처음 init() 함수에서 getPercent(); 함수를 호출해 최초 1번만 실행주는 겁니다 :)

제일 처음 딱 한번만 실행해 주면서 스크롤 수식을 구하고 스크롤 위치에 맞는 화면을 보여주게 되는거죠 :D

그다음 부터는 사용자가 마우스 스크롤을할때마다 getPercent(); 함수를 실행해서  화면에 맞는 내용들이 표시되는겁니다 :)

도움이 되었길 바라겠습니다.

또 다른 궁금증이 생길때 언제든 문의주세요 :)

안녕하세요 :)

스크롤을 끝까지 했을때 100까지 정상적으로 나오는데요

만약 99까지 나온다면

var textPercent = Math.floor(scrollPercent);

해당 부분에서 소수점을 버릴때 내림을 하지말고

var textPercent = Math.ceil(scrollPercent);

다음과 같이 올림을 하도록 처리해보세요!

Math.floor 소수점 이하를 버림

Math.ceil 소수점 이하을 올림

Math.round 소수점이하를 반올림

안녕하세요 엄태인님:)

스크롤이벤트를 바인드 했을때 웹브라우저에서 스크롤을 진행했다면 스크롤 이벤트 안에 있는 함수들이 실행되지만

스크롤을 한번도 진행 안했을때는 스크롤 이벤트 안에 있는 함수들이 실행되지 않습니다.

그렇기에 init함수를 통해서 먼저 프로그램을 호출해 실행시켜 줍니다 :)

그럼 또다른 궁금증이 생길때 문의주세요 :D

도움이 되었다니 다행이네요 :)

무슨뜻인지 알것 같습니다. 자세한 설명 정말 감사합니다! 궁금증이 풀렸습니다! ㅎㅎㅎ

강의 잘들었는데요,
댓글에 답 달아주신것이 궁금해 여쭤봅니다!!

1) 스크롤이벤트를 바인드 한다는게 무슨뜻인가요?

2) 스크롤을 진행하지 않으면 함수들이 실행이 안돼 init함수를 통해 프로그램을 호출한다고 했는데,

스크롤 안할때는 굳이 이게 실행될 필요가 있는건가요?
필요가 있기에 실행을 시켰겠지만, 그 이유가 궁금합니다. 왜 스크롤 안했을때도 실행이 되어야 하는지.

답변 기다릴게요!