메뉴 건너뛰기

조회 수 7143 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

아래 소스는 스크롤 이벤트가 발생할 때, box 레이어를 화면상 최 상단에 1초후에 이동시킨다. 애니메이션 효과 없이 바로 이동 시키기를 원하면 1000 대신 0을 넣는다.


<script>

$(window).scroll(function(){

//스크롤 된 화면의 상단 좌표를 얻는다.

var pos = $(window).scrollTop();

//box 레이어가 1초후에 화면의 꼭대기로 이동한다.

$('#box').stop().animate({top:pos+'px'}, 1000);    

}

</script>


<div id="box">

//내용 표시

</div>



box 레이어의 위치를 화면 상단에서 일정한 위치 아래 두고 싶으면 계산된 pos 값이 원하는 높이값을 더해준다.


List of Articles
번호 제목 날짜 조회 수
19 DateTimepicker ( Timepicker + Datepicker ) file 2021.03.26 790
18 datepicker, onclick 이벤트시에 한번에 뜨게 하기 2021.03.26 1464
17 CSS로 요소에 대한 클릭 등 이벤트 발생을 막고 싶을 때 2021.03.25 207
16 click에 따른 마우스 휠 on off 2021.03.31 304
15 click event scroll 2021.03.31 827
14 change 전의 값을 가져오기 2021.03.26 258
13 Cesium에서 canvas 화면 center 지점의 좌표 취득 2021.03.25 373
12 bxslider 멈춤현상 2016.12.22 10116
11 before / after / insertBefore / insertAfter - element 추가 (동등 관계) 2021.03.31 168
10 attr() - style의 특정 속성만 바꾸기 2021.03.26 1129
9 Ajax를 통해 전송된 데이터를 Controller에서 List 객체로 받기 2021.03.25 12252
8 Ajax를 이용한 데이터 조회시 로딩 로딩 이미지 보이기(jquery이용) file 2016.12.22 10746
7 Ajax 파일 업로드 샘플 코드 2017.03.11 7791
6 ajax 아작스 통신 2016.09.09 8046
5 ajax 동기화 처리하기 2021.03.25 416
4 3D Perspective Carousel with jQuery and CSS3 - CSSSlider 2018.11.07 1388
3 //ex)텍스트 박스 포커스 활성, 비활성 이벤트 2019.06.04 812
2 .removeAttr() : 특정 속성을 제거 2019.01.16 1021
1 .attr() : 태그의 속성 값을 읽어오거나 속성을 추가및 재설정 2019.01.16 962
Board Pagination Prev 1 ... 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved