인프런 커뮤니티 질문&답변

tt t

작성한 질문수

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

2-1 [코드설명] 기초다지기! 이동할 거리 백분율 구하는 방법

100% 가 아니라 156%가 나와요.

작성

190

js 문제인가 싶어 선생님 소스를 그대로 갖다 써봤는데도 결과물 최대치가 156%가 나옵니다.

css 문제인가도 싶은데 당췌 뭐가 잘못된건지 모르겠어요.

<body>

    <div class="wrap">
        <section class="sec01">
            <article class="content">
                <div class="progress">
                    <span class="bar"></span>
                    <p class="txt">0%</p>
                </div>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>
                가<br>

            </article>
        </section>
    </div>
</body>

.content {
  width: 1000px;
  margin: 100px auto; }
  .content .progress {
    position: fixed;
    left: 50%;
    top: 500px;
    width: 70%;
    height: 100px;
    margin-left: -35%;
    border: 1px solid #222;
    text-align: center;
    line-height: 100px; }
    .content .progress .bar {
      display: block;
      width: 0%;
      height: 100%;
      background-color: #111; }

var text = $(".progress .txt");
var progressBar = $(".progress .bar");

function getPercent() {
    var scrollHeight = $('.sec01').height();
    var scrollRealHeight = (scrollHeight - $(window).height());
    var winScrollTop = $(window).scrollTop();
    var scrollPercent = (winScrollTop / scrollRealHeight) * 100;
    var textPercent = Math.floor(scrollPercent);

    render(textPercent, scrollPercent);

}

function render(textPercent, scrollPercent) {
    text.text(textPercent + "%");
    progressBar.css({
        width: scrollPercent + "%"
    });
}



function init() {
    getPercent();
}
$(window).scroll(function () {
    getPercent();
})
init();