반응형
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>
반응형
'IT News > jQuery' 카테고리의 다른 글
javascript replace 자바스크립트 문자열 변경 (0) | 2016.04.12 |
---|---|
jQuery 체크박스(checkbox) 의 모든 것 (0) | 2013.12.10 |
jQuery를 이용한 메인이미지 변경 효과 - animate, fade효과 (0) | 2012.12.23 |