쇼핑몰: #95 오늘 본 상품 스크롤 완료

css/default_shop.css

@@ -89,14 +89,14 @@ a:active {color:#000;text-decoration:underline}
 #wrapper_title {margin-bottom:20px;font-size:1.2em}
 
 /* 오늘 본 상품 */
-#stv {float:right;width:90px}
-#stv_list {border:1px solid #e9e9e9}
+#stv {z-index:1001;float:right;position:relative;width:90px;background:#fff}
+#stv_list {position:fixed !important;position:absolute;width:90px;border:1px solid #e9e9e9}
 #stv_list h2 {padding:10px 0 8px;background:#f7f7f7;text-align:center;letter-spacing:-0.1em}
 #stv_pg {display:block;margin:5px 0 0}
 #stv_list p {padding:20px 0;text-align:center}
 #stv_btn {text-align:center;zoom:1}
 #stv_btn:after {display:block;visibility:hidden;clear:both;content:''}
-#stv_btn button {float:left;padding:5px 0 3px;width:44px;border:0;background:#555;color:#fff;text-align:center}
+#stv_btn button {float:left;padding:5px 0 4px;width:44px;border:0;background:#555;color:#fff;text-align:center}
 #stv_ul {margin:5px 0 10px;padding:0;list-style:none}
 .stv_item {display:none;text-align:center}
 .stv_item img {margin:5px 0}

js/scroll_oldie.js

@@ -0,0 +1,30 @@
+// 원본출처 http://blog.bits.kr/90 - 어떤 용도로도 자유로운 사용가능. 수정/배포도 마음대로..
+// 수정 지운아빠 2013-04-30
+$(function(){
+    var $win = $(window);
+    var top = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
+
+    /*사용자 설정 값 시작*/
+    var speed          = 1000;     // 따라다닐 속도 : "slow", "normal", or "fast" or numeric(단위:msec)
+    var easing         = 'linear'; // 따라다니는 방법 기본 두가지 linear, swing
+    var $layer         = $('#stv_list'); // 레이어 셀렉팅
+    var layerTopOffset = 0;   // 레이어 높이 상한선, 단위:px
+    $layer.css('position', 'absolute');
+    /*사용자 설정 값 끝*/
+
+    // 스크롤 바를 내린 상태에서 리프레시 했을 경우를 위해
+    if (top > 0 )
+        $win.scrollTop(layerTopOffset+top);
+    else
+        $win.scrollTop(0);
+
+    //스크롤이벤트가 발생하면
+    $(window).scroll(function(){
+        yPosition = $win.scrollTop() - 223;
+        if (yPosition < 0)
+        {
+            yPosition = 0;
+        }
+        $layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false});
+    });
+});

shop/boxtodayview.inc.php

@@ -15,10 +15,7 @@ $tv_div['img_length'] = 3; // 한번에 보여줄 이미지 수
 
     <?php if ($tv_idx) { // 오늘 본 상품이 1개라도 있을 때 ?>
 
-    <div id="stv_btn">
-        <button id="up">위</button>
-        <button id="down">아래</button>
-    </div>
+    <div id="stv_btn"></div>
 
     <?php
     for ($i=1;$i<=$tv_idx;$i++)
@@ -43,6 +40,10 @@ $tv_div['img_length'] = 3; // 한번에 보여줄 이미지 수
     $(function() {
         var itemQty = <?php echo $tv_idx; ?>; // 총 아이템 수량
         var itemShow = <?php echo $tv_div['img_length']; ?>; // 한번에 보여줄 아이템 수량
+        if (itemQty > itemShow)
+        {
+            $('#stv_btn').append('<button id="up">위</button><button id="down">아래</button>');
+        }
         var Flag = 1; // 페이지
         var EOFlag = parseInt(<?php echo $i-1; ?>/itemShow); // 전체 리스트를 3(한 번에 보여줄 값)으로 나눠 페이지 최댓값을 구하고
         var itemRest = parseInt(<?php echo $i-1; ?>%itemShow); // 나머지 값을 구한 후
@@ -74,9 +75,27 @@ $tv_div['img_length'] = 3; // 한번에 보여줄 이미지 수
             }
             $('#stv_pg').text(Flag+'/'+EOFlag); // 페이지 값 재설정
         });
+
+        // 위치 고정
+        var currentPosition = parseInt($("#stv_list").css("top"));
+        $(window).scroll(function() {
+            var position = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
+            if(position > 233){
+                if($.browser.msie && $.browser.version <= 6){
+                } else {
+                    $("#stv_list").css('top', '20px');
+                }
+            }else{
+                $('#stv_list').attr('style','');
+            }
+        });
     });
     </script>
 
+    <!--[if lte IE 6]>
+    <script src="<?php echo G4_JS_URL ?>/scroll_oldie.js"></script>
+    <![endif]-->
+
     <?php } else { // 오늘 본 상품이 없을 때 ?>
 
     <p>없음</p>