(function () {
    var text = document.querySelector(".progress .txt"); 
    var progressBar = document.querySelector(".progress .bar"); 
    var render = function (textPercent, scrollPercent) {
        text.innerText = textPercent + "%"; 
        progressBar.style.width = scrollPercent + "%";
    }
    var getPercent = function () {
        var scrollHeight = document.body.scrollHeight; 
        var scrollRealHeight = (scrollHeight - innerHeight); 
        var winScrollTop = pageYOffset; 
        var scrollPercent = (winScrollTop / scrollRealHeight) * 100;
        var textPercent = Math.floor(scrollPercent);
        render(textPercent, scrollPercent);
    }
    var init = function () {
        getPercent();
    }
    init();
    addEventListener("scroll", function () {
        getPercent();
    })
})()

(function (win, $) {
    var text = $('.progress .txt');
    var progressBar = $('.progress .bar');
    var render = function (textPercent, scrollPercent) {
        text.text(textPercent + '%');
        progressBar.css({
            width : scrollPercent + '%'
        });
    }
    var getPercent = function () {
        var scrollHeight = $('body').prop('scrollHeight');
        var scrollRealHeight = (scrollHeight - $(win).height());
        var winScrollTop = $(win).scrollTop();
        var scrollPercent = (winScrollTop / scrollRealHeight) * 100;
        var textPercent = Math.floor(scrollPercent);
        render(textPercent, scrollPercent);
    }
    var init = function () {
        getPercent();
    }
    $(win).on('scroll', function(){
        getPercent();
    });
    init(); //초기화
})(window, window.jQuery)

(function () {
    var text = document.querySelector(".progress .txt"); // var text = $('.progress .txt');
    var progressBar = document.querySelector(".progress .bar"); // var progressBar = $('.progress .bar');
    var render = function (textPercent, scrollPercent) {
        text.innerText = textPercent + "%"; // text.text(textPercent + '%');
        progressBar.style.width = scrollPercent + "%";
        // progressBar.css({
        // 	width : scrollPercent + '%'
        // });
    }
    var getPercent = function () {
        var scrollHeight = document.body.scrollHeight; // var scrollHeight = $(document).height();
        var scrollRealHeight = (scrollHeight - innerHeight); // var scrollRealHeight = (scrollHeight - $(win).height());
        var winScrollTop = pageYOffset; // var winScrollTop = $(win).scrollTop();
        var scrollPercent = (winScrollTop / scrollRealHeight) * 100;
        var textPercent = Math.floor(scrollPercent);
        render(textPercent, scrollPercent);
    }
    var init = function () {
        getPercent();
    }
    init();
    addEventListener("scroll", function () {
        getPercent();
    })
    // 	$(win).on('scroll', function(){
    // 		getPercent();
    // 	});
})()