스크롤 따라다니는 레이어~

스크롤 따라다니는 레이어~ > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

스크롤 따라다니는 레이어~ 정보

스크롤 따라다니는 레이어~

첨부파일

test.html (2.3K) 173회 다운로드 2013-02-06 19:34:16

본문

전체적인 조건은
항시 상태에서 스크롤에 변화가 생겼을때.
스크롤상태가 최상일경우
브라우져 크기가 변경되었을경우
컨텐츠 우측으로 붙어야함.

이렇게 4개가 큰 조건이며 위 조건을 만족하게 작업하였습니다.
제이쿼리 버젼은 1.4.4에서도 작동이 될것으로 보입니다.

무튼 짜는데 30분 정도 걸렸는데... 쓸만한것 같아서 올려봅니다.


<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".quick").animate({
			"top": $(document).scrollTop()+140+"px"
		}, 100);
		$(".quick").css("left",  $(".content").offset().left+$(".content").outerWidth());

		$(window).scroll(function(){
			if($(document).scrollTop() == "0"){ // 스크롤이 최상위라면...
				$(".quick").animate({
					"top": $(document).scrollTop()+140+"px"
				}, 100);
			}else{
				$(".quick").animate({
					"top": $(document).scrollTop()+"px"
				}, 100);
			}
		});
	});
	$(window).resize(function(){
		$(".quick").css("left",  $(".content").offset().left+$(".content").outerWidth());
	});
	</script>
	<style type="text/css">
		.quick {position:absolute; z-index:2; top:0; left:0; width:100px; border:1px solid #ccc; text-align:center;}
		.quick .title {padding:15px 0; background-color:#ccc;}
		.quick .item_content {padding:10px 0}
		.quick .item_content .item {margin-bottom:5px;}
	</style>
</head>
<body>
	<div class="quick">
		<div class="title">오늘 본 상품</div>
		<div class="item_content">
			<div class="item">
				<div class="item_images"><img src="xbox.jpg" width="80px"></div>
				<div class="item_subject">천혜향 1kg<br>15,000 원</div>
			</div>
			<div class="item">
				<div class="item_images"><img src="xbox.jpg" width="80px"></div>
				<div class="item_subject">팥600g</div>
			</div>
			<div class="item">
				<div class="item_images"><img src="xbox.jpg" width="80px"></div>
				<div class="item_subject">팥600g</div>
			</div>
		</div>
	</div>



	<div style="width:100%;">
		<div class="content" style=" margin:0 auto; width:800px; border:1px solid #ccc;">
			1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
		</div>
	</div>
	
	
</body>
</html>

ps, 제이쿼리가 아닌 생 자바스크립트로는 짤 줄 모릅니다 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
ps, ▼ 클릭좀-------- ㅇㅅㅇ