http://www.dailypop.kr/script/floating.banner.js?ver=11

1/*
2floating_banner_body(id) -> position:relative
3nd_floating_banner(class) -> position:absolute(여러개 가능)
4
5<div id="floating_banner_body"> 
6	// 
7	<div id="floating_banner_left" class="nd_floating_banner" data-parent-target="ND_Warp" data-top-margin="5" data-duration="300" data-scroll='y'>
8		<ul>
9			<li>좌측배너</li>
10		</ul>
11	</div>
12	<div id="floating_banner_right" class="nd_floating_banner" data-scroll='y' data-top-margin="5" data-duration="300">
13		<ul>
14			<li>우측배너</li>
15		</ul>
16	</div>
17</div>
18*/
19(function($) {
20	$(function(){
21		if($(".view-aside").is(".view-aside") === true) {  // 대상이 있으면 작동
22
23			var $NDFloatingBanner = {
24				target:$(".view-aside"),	// 배너
25				parentTarget:null,                  // 부모
26				parentTargetHeight:0,               // 부모높이
27				targetTopMargin:[],                 // 스크롤이 배너보다 밑으로 내려가면 상단으로 붙는데 이때 여백
28				targetTopPosi:[],                   // 문서시작 부분과 배너 상단사이 여백
29				targetHeight:[],                    // 배너높이
30				execMaxPosi:[],                     // 배너가 스크롤되어 내려오는 한계점
31				duration:[],                        // 지속시간
32				tops:[],                            // 시작 top 값
33				scrolls:[],                         // 스크롤 여부
34				stop:false,                         // 스크롤 정지여부
35				getOptions:function() {             // 옵션값 지정
36					var $this = this;
37					var scrollStopCheck = true;
38					this.parentTarget = $("#"+this.target.attr("data-parent-target"));
39					this.parentTargetHeight = this.parentTarget.height() || 0;
40					this.target.each(function(index,ele) {
41						$this.targetTopMargin[index] = Number($(ele).attr("data-top-margin")) || 5;
42						$this.scrolls[index] = $(ele).attr("data-scroll") || "n";
43						if($this.scrolls[index] == 'y') scrollStopCheck = false;
44						$this.tops[index] = parseInt($(ele).css("top")) || 0;
45						$this.targetTopPosi[index] = $(ele).offset().top - $this.targetTopMargin[index] || 0;
46						$this.targetHeight[index] = $(ele).height() || 0;
47						$this.execMaxPosi[index] = $this.parentTargetHeight - $this.targetHeight[index] || 0;
48						$this.duration[index] = $(ele).attr("data-duration") || 300;
49					});
50					// 스크롤 범위가 작다면 정지
51					this.stop = (this.parentTargetHeight < this.targetHeight) ? true : false; 
52					// data-scroll 이 모두 n이라면 정지
53					if(scrollStopCheck === true) this.stop = true;
54				}
55			};
56			$NDFloatingBanner.getOptions();
57
58			if($NDFloatingBanner.scrolls.length > 0 && $NDFloatingBanner.stop === false) {
59				$(window).scroll(function() {
60					var position = 0;
61					// 스크롤 위치계산
62					if (window.innerWidth) position = window.pageYOffset;
63					else if (document.documentElement && document.documentElement.clientWidth) position = document.documentElement.scrollTop;
64					else if (document.body.clientWidth) position = document.body.scrollTop;
65
66					// 여러개 배너중 스크롤을 하는 것만 
67					for(scrollData in $NDFloatingBanner.scrolls) {
68						if($NDFloatingBanner.scrolls[scrollData] == 'y') {
69							var top = 0;
70
71							if($NDFloatingBanner.execMaxPosi[scrollData] < position) {    // 한계점에 가면 최대치로 지정
72								top = $NDFloatingBanner.execMaxPosi[scrollData] + $NDFloatingBanner.tops[scrollData] - $NDFloatingBanner.targetTopPosi[scrollData];
73
74								//2016. 11. 15 성재원 추가 - ND_Warp 높이가 짧은건 비정상적으로 위로 올라가거나 밑으로 내려가는 현상 방지 수정.
75								if(top < $NDFloatingBanner.tops[scrollData] - $NDFloatingBanner.execMaxPosi[scrollData]){
76									if($NDFloatingBanner.targetTopPosi[scrollData] < position) top = position + $NDFloatingBanner.tops[scrollData] - $NDFloatingBanner.targetTopPosi[scrollData];
77									else top = $NDFloatingBanner.tops[scrollData];
78								}else{ 
79									if(top < 0){
80										if($NDFloatingBanner.targetTopPosi[scrollData] < position) top = position + $NDFloatingBanner.tops[scrollData] - $NDFloatingBanner.targetTopPosi[scrollData];
81										else top = $NDFloatingBanner.tops[scrollData];
82									}else{
83										if(top < $NDFloatingBanner.tops[scrollData]) top = $NDFloatingBanner.tops[scrollData];
84									}
85								}
86							
87							} else {   // 배너 상단의 여백이상 지나가면 상단에 ë

87¶™ë„록
88								if($NDFloatingBanner.targetTopPosi[scrollData] < position) top = position + $NDFloatingBanner.tops[scrollData] - $NDFloatingBanner.targetTopPosi[scrollData];
89								else top = $NDFloatingBanner.tops[scrollData];
90							}
91
92							$NDFloatingBanner.target.eq(scrollData).stop().animate({"top":top+"px"},{duration:$NDFloatingBanner.duration[scrollData], specialEasing: {width: "linear",height: "easeOutBounce"}, queue:false}); 
93						}
94					}
95				});
96			}
97		}
98	});
99})(jQuery);