https://foodicon.co.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	$(window).load(function(){
22			if($(".view-aside").is(".view-aside") === true) {  // 대상이 있으면 작동
23				
24					var $NDFloatingBanner = {
25							target:$(".view-aside"),        // 배너
26							parentTarget:null,                  // 부모
27							parentTargetHeight:0,               // 부모높이
28							targetTopMargin:[],                 // 스크롤이 배너보다 밑으로 내려가면 상단으로 붙는데 이때 여백
29							targetTopPosi:[],                   // 문서시작 부분과 배너 상단사이 여백
30							targetHeight:[],                    // 배너높이
31							execMaxPosi:[],                     // 배너가 스크롤되어 내려오는 한계점
32							duration:[],                        // 지속시간
33							tops:[],                            // 시작 top 값
34							scrolls:[],                         // 스크롤 여부
35							stop:false,                         // 스크롤 정지여부
36							getOptions:function() {             // 옵션값 지정
37									var $this = this;
38									var scrollStopCheck = true;
39									this.parentTarget = $("#"+(this.target.attr("data-parent-target")||"user-container"));
40									this.parentTargetHeight = this.parentTarget.height() || 0;
41									this.target.each(function(index,ele) {
42											$this.targetTopMargin[index] = Number($(ele).attr("data-top-margin")) || 5;
43											$this.scrolls[index] = $(ele).attr("data-scroll") || "n";
44											if($this.scrolls[index] == 'y') scrollStopCheck = false;
45											$this.tops[index] = parseInt($(ele).css("top")) || 0;
46											$this.targetTopPosi[index] = $(ele).offset().top - $this.targetTopMargin[index] || 0;
47											$this.targetHeight[index] = $(ele).height() || 0;
48											$this.execMaxPosi[index] = $this.parentTargetHeight - $this.targetHeight[index] || 0;
49											$this.duration[index] = $(ele).attr("data-duration") || 300;
50									});
51
52
53									// 스크롤 범위가 작다면 정지
54									this.stop = (this.parentTargetHeight < this.targetHeight) ? true : false;
55
56
57									// data-scroll 이 모두 n이라면 정지
58									if(scrollStopCheck === true) this.stop = true;
59							}
60					};
61					$NDFloatingBanner.getOptions();
62
63
64					if($NDFloatingBanner.scrolls.length > 0 && $NDFloatingBanner.stop === false) {
65							$(window).scroll(function() {
66									var position = 0;
67									// 스크롤 위치계산
68									if (window.innerWidth) position = window.pageYOffset;
69									else if (document.documentElement && document.documentElement.clientWidth) position = document.documentElement.scrollTop;
70									else if (document.body.clientWidth) position = document.body.scrollTop;
71
72
73									// 여러개 배너중 스크롤을 하는 것만
74									for(scrollData in $NDFloatingBanner.scrolls) {
75											if($NDFloatingBanner.scrolls[scrollData] == 'y') {
76													var top = 0;
77
78
79													if(($NDFloatingBanner.targetTopPosi[scrollData]+$NDFloatingBanner.execMaxPosi[scrollData]) < position) {    // 한계점에 가면 최대치로 지정
80															top = $NDFloatingBanner.execMaxPosi[scrollData] + $NDFloatingBanner.tops[scrollData];// - $NDFloatingBanner.targetTopPosi[scrollData];
81													
82													} else {   // 배너 상단의 여백이상 지나가면 상단에 붙도록
83															if($NDFloatingBanner.targetTopPosi[scrollData] < position) top = position + $NDFloatingBanner.tops[scrollData] - $NDFloatingBanner.targetTopPosi[scrollData];
84															else top = $NDFloatingBanner.tops[scrollData];
85													}
86
87
88													$NDFloatingBanner.target.eq(scrollData).stop().animate({"top":top+"px"},{duration:$NDFloatingBanner.duration[scrollData], specialEasing: {width: "linear",height: "easeOutBounce"}, queue:false});
89											}
90									}
91							});

92					}
93			}
94	});
95})(jQuery);