스크롤 따라다니는 레이어~
전체적인 조건은
항시 상태에서 스크롤에 변화가 생겼을때.
스크롤상태가 최상일경우
브라우져 크기가 변경되었을경우
컨텐츠 우측으로 붙어야함.
이렇게 4개가 큰 조건이며 위 조건을 만족하게 작업하였습니다.
제이쿼리 버젼은 1.4.4에서도 작동이 될것으로 보입니다.
무튼 짜는데 30분 정도 걸렸는데... 쓸만한것 같아서 올려봅니다.
[code]
<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>
[/code]
ps, 제이쿼리가 아닌 생 자바스크립트로는 짤 줄 모릅니다 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
ps, ▼ 클릭좀-------- ㅇㅅㅇ
항시 상태에서 스크롤에 변화가 생겼을때.
스크롤상태가 최상일경우
브라우져 크기가 변경되었을경우
컨텐츠 우측으로 붙어야함.
이렇게 4개가 큰 조건이며 위 조건을 만족하게 작업하였습니다.
제이쿼리 버젼은 1.4.4에서도 작동이 될것으로 보입니다.
무튼 짜는데 30분 정도 걸렸는데... 쓸만한것 같아서 올려봅니다.
[code]
<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>
[/code]
ps, 제이쿼리가 아닌 생 자바스크립트로는 짤 줄 모릅니다 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
ps, ▼ 클릭좀-------- ㅇㅅㅇ
댓글 8개
12년 전
익스8에서는 테스트해보니 동작을 하지 않네요. 크롬과 파폭은 잘 동작이 되고요.
Terrorboy
12년 전
mmgol님 말씀처럼 DTD를 선언하셔야합니다.
기본 브라우져가 크롬이라 따로 DTD지정을 안했더니.... ㅎㅎㅎㅎ
기본 브라우져가 크롬이라 따로 DTD지정을 안했더니.... ㅎㅎㅎㅎ
mmgol
12년 전
dtd 선언하니 잘되네요.
수고하셨습니다.
수고하셨습니다.
Terrorboy
12년 전
감사합니다.~
빠뜨린 부분을 정확히 지정해주셨네요 ㅎㅎ
크롬에 익숙 하다보니 가테스트에서는 안넣는 버릇이 ㅎㅎㅎ
빠뜨린 부분을 정확히 지정해주셨네요 ㅎㅎ
크롬에 익숙 하다보니 가테스트에서는 안넣는 버릇이 ㅎㅎㅎ
12년 전
DTD 선언하고 테스트해보니 익스8에서 굉장히 스크롤이 느리게 동작하네요?
Terrorboy
12년 전
엇? 그러네요..
아마 해당 현상은 animate 제이쿼리 함수 때문인것 같은데....
이것도 완벽하지는 않나보군요..
다른방식으로 만들어봐야겠습니다.
아마 해당 현상은 animate 제이쿼리 함수 때문인것 같은데....
이것도 완벽하지는 않나보군요..
다른방식으로 만들어봐야겠습니다.
돼지코구뇽
12년 전
테러보이님 역시 고수
rumi717
12년 전
좋아요~
게시판 목록
그누4 팁자료실
그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
나누면 즐거움이 커집니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2989 |
 쌈쟁이헌이 |
12년 전 | 3845 | |
| 2988 | 12년 전 | 5686 | ||
| 2987 | 12년 전 | 4033 | ||
| 2986 | 12년 전 | 7866 | ||
| 2985 | 12년 전 | 4846 | ||
| 2984 | 12년 전 | 10644 | ||
| 2983 | 12년 전 | 4999 | ||
| 2982 |
쌈쟁이헌이 |
12년 전 | 5940 | |
| 2981 |
 Terrorboy |
12년 전 | 5849 | |
| 2980 |
NsoftC
|
12년 전 | 2837 | |
| 2979 | 12년 전 | 14793 | ||
| 2978 |
Terrorboy |
12년 전 | 4124 | |
| 2977 | 12년 전 | 3886 | ||
| 2976 | 12년 전 | 3829 | ||
| 2975 |
Naoki
|
12년 전 | 4320 | |
| 2974 |
오늘도망했다
|
12년 전 | 3826 | |
| 2973 |
 Faceissue |
12년 전 | 5254 | |
| 2972 |
greed
|
12년 전 | 3482 | |
| 2971 | 12년 전 | 19778 | ||
| 2970 | 12년 전 | 8445 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기