만들다 팁!
홈 > 제작관련 > 제작팁
제작팁

스크롤되면 필요한 포인트에서 alert 처리

스크롤이될때

 

특정위치를 확인하고

 

alert (또는 팝업처리) 으로 현재 포인트에 나타낼 정보를 처리할때 사용한다.

 

-------------소스-----------

 

 <!doctype html>

<html lang="ko">

<head>

<meta charset="utf-8">

<meta http-equiv="imagetoolbar" content="no">

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<title>스크롤 테스트</title>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<!--[if lte IE 8]> 

<script src="http://gboard.deb.kr/js/html5.js"></script>

<![endif]-->

<script type="text/javascript">

$(function(){

var overoffset = 0;

$(window).scroll(function(){

var nowScroll = $(document).scrollTop();

$("div").each( function() {

var aa = $(this).offset().top;

if (nowScroll >= aa)  {

if (overoffset < aa) {

overoffset = aa;

alert("nowscroll : " +nowScroll+ ",  div : " + aa);

$(this).addClass('actives');    

}

}

});

 

});

});

</script>

<style>

.aa {background:#AAAAAA; width:300px; height:400px}

.bb {background:#FEDDDD; width:400px; height:550px}

.cc {background:#EEEEFE; width:400px; height:550px}

.actives { background:#FF0000;}

</style>

 </head>

 <body >

 <br><br><br>

<div class="aa" ></div>

<div class="bb" ></div>

<div class="cc" ></div>

 </body>

 </html>

[이 게시물은 관리자님에 의해 2017-10-18 09:56:45 자유롭게시판 에서 이동 됨]

0 Comments
Category
State
  • 현재 접속자 17 명
  • 오늘 방문자 245 명
  • 어제 방문자 772 명
  • 최대 방문자 772 명
  • 전체 방문자 70,881 명
  • 전체 게시물 154 개
  • 전체 댓글수 37 개
  • 전체 회원수 10 명
Facebook Twitter GooglePlus KakaoStory NaverBand