[JavaScript] 기능 모듈화 시키기

중복되는 기능을 하나의 파일로 관리하여 다른 파일에도 적용 가능하도록한다.

 

1. 파일 저장

모듈화된 기능을 저장할 파일을 아래 경로에 만든다.

위 생성된 파일에 2,3번을 추가한다.

 

2. 태그 동적 추가 및 CSS 적용

id는 확실하게 지어주는 것이 좋다. 'bar' 보단 'scroll-bar-indicator'로 지정한다.

$('<div id="scroll-bar-indicator"></div>').css({
    width: '50%',
    height: '5px',
    backgroundColor: 'cornflowerblue',
    position: 'fixed',
    left: 0,
    top:0
}).prependTo($('body'));

 

3. 이벤트 추가

$(document).scroll(function() {
    let x = $(document).scrollTop() * 100 / ($(document).outerHeight()-$(window).outerHeight());
    $('#scroll-bar-indicator').css('width', x+'%');
});

 

 

4. 다른 파일에 연결

<script src="../asset/js/scroll.js"></script>