IT News/jQuery

jQuery 스크롤 이벤트 및 스크롤 위치 및 본문 사이즈 값에 관련된 소스

Fshop 2014. 3. 28. 17:23
반응형

jQuery 를 이용한 스크립트를 작성할때 스크롤 이벤트에 관련된 함수에 이용 가능한 소스코드를 정리해 보았습니다. 처음에는 퀵메뉴를 고정시키고 슬라이딩 시키는 효과를 주려고 했지만 웹표준 상 퀵메뉴는 css 로 position:fixed 로 했습니다. 혹시 몰라서 스크롤 이벤트에 관련된 변수값과 정보들에 관해 적어 놓습니다. 참고하세요~^^ (참 맨 상단에 jquery.min.js 파일 포함되어야 하는 거 아시죠?^^ 파일을 jquery.com 사이트를 방문하시면 있어요^^)


<script>
jQuery(function($){


    $(window).scroll(function() {

        var scrollTop = $(window).scrollTop()+20;    // 스크롤 위치 값에 20을 더했음
        var height = $(window).height();            // 브라우저 창 사이즈
        var scrollHeight = scrollTop + height;
        var documentHeight = $(document).height();    // 문서 사이즈

        $('#quick_banner').css('top', scrollTop+'px');    // id값이 quick_banner 라는 top 위치를 스크롤 값 만큼으로 세팅


       
    });
});
</script>

반응형