https://www.lovecosmetic.jp/js/bottom_popup.js

1$(function(){
2	
3	var $win     = $(window);
4  var $popBox  = $('#popBox');
5  var $popBtn  = $popBox.find('.pop_btn');
6
7	var monitor  = checkBrowser();
8  var ieStat   = window.applicationCache;
9	var pcStat   = ( monitor.device == "pc" ) ? true : false;
10	var action   = "click";
11	
12  var initStat = true;  // 初回実行ステータス
13	var openStat = false; // 表示ステータス
14  var chgStat  = false; // Scroll用ステータス
15  var saveStat = false; // Scroll用ステータス
16  var sizeStat = false; // Resize用ステータス
17  var saveSize = false; // Resize用ステータス
18  
19	var spWidth  = 768;	// SP切替えサイズ
20  var popSp    = 150; // アニメーションスピード
21
22	var sc = {};
23	
24  var $target, tarPos, mvSet1, mvSet2;
25  
26  var timer = false;
27  var winWidth = $(window).width();
28  var winWidth_resized;
29
30
31
32
33	//*********************************************************************
34	//
35	//	ターゲットとなる要素を指定
36	//
37	//*********************************************************************
38  $target = $('#main_detail').find('.ex_box');
39
40
41	//*********************************************************************
42	//
43	//	初期設定
44	//
45	//*********************************************************************
46	$(window).load(function() {
47    
48		onResize();
49		//onScroll();
50    
51		$win.resize(onResize);
52		//$win.scroll(onScroll);
53  
54    // 初期位置 //
55		if( sc.w <= spWidth ){
56      mvSet1 = -($popBox.outerHeight(true));
57      mvSet2 = 0;
58    }else{
59      mvSet1 = -($popBox.outerHeight(true)-52);
60      mvSet2 = -($popBox.outerWidth(true)-144);
61    }
62    $popBox.css({ display:'block', bottom:mvSet1+'px', right:mvSet2+'px' });
63     
64     
65    var winW = window.innerWidth ? window.innerWidth: $(window).width();
66    var txt = "購入はこちら";
67    
68    if(winW <= spWidth) {
69      txt = "購入する";  
70    }
71    
72    $popBtn.find('span').text(txt);
73     
74      
75	});
76    
77	
78	//*********************************************************************
79	//
80	//	POPUP BUTTON
81	//
82	//*********************************************************************
83	$popBtn.bind(action,function(e){
84		
85    if(!$(this).hasClass("anc")){
86      // 閉じてる場合：OPEN //
87      if( !openStat ){
88        boxOn();
89        
90      // 開いている場合：CLOSE //
91      }else{
92        boxOff();
93      }
94    }
95    
96    
97	});
98  
99  // OPEN //
100  function boxOn(){
101    
102    mvSet1 = 0;
103    mvSet2 = 0;
104    $popBox.removeClass('close');
105    $popBtn.find('span').text("閉じる");
106    
107    // Animation //
108    $popBox.stop().animate({ bottom:mvSet1+'px', right:mvSet2+'px' },{duration:popSp});
109	  openStat = true;
110  }
111  
112  // CLOSE //
113  function boxOff(){
114    
115		if( sc.w <= spWidth ){
116      mvSet1 = -($popBox.outerHeight(true));
117      mvSet2 = 0;
118    }else{
119      mvSet1 = -($popBox.outerHeight(true)-52);
120      mvSet2 = -($popBox.outerWidth(true)-144);
121    }
122    
123    var winW = window.innerWidth ? window.innerWidth: $(window).width();
124    var txt = "買い物かごへ";
125    
126    if(winW <= spWidth) {
127      txt = "かごへ";  
128    }
129    
130    $popBox.addClass('close');
131    $popBtn.find('span').text(txt);
132    
133    // Animation //
134    $popBox.stop().animate({ bottom:mvSet1+'px', right:mvSet2+'px' },{duration:popSp});
135		openStat = false;
136  }
137  
138	
139	//*********************************************************************
140	//
141	//	各種 EVENT 設定
142	//
143	//*********************************************************************
144	
145	//--------------------------------------------
146	//	Resize Event
147	//--------------------------------------------
148	function onResize(){
149    
150    if (timer !== false) {
151      clearTimeout(timer);
152    }
153    
154    timer = setTimeout(function() {
155      // リサイズ後のウインドウの横幅を取得
156      winWidth_resized = $(window).width();
157
158      // リサイズ前のウインドウ幅とリサイズ後のウインドウ幅が異なる場合
159      if ( winWidth != winWidth_resized ) {
160        // ここにやりたい処理書く
161        // CLOSE //
162        if( initStat ){
163          initStat = false;
164        }else{
165          boxOff();
166        }
167
168        // 次回以降使えるようにリサイズ後の幅をウインドウ幅に設定する
169        winWidth = $(window).width();
170      }
171    }, 200);
172    
173    //alert("e");
174		
175		sc.w = $win.width();
176		sc.h = $win.height();
177
178    // ターゲットのトリガー位置取得（スクロールイベントに必要） //
179    //tarPos = $target.offset().top + $target.outerHeight(true);
180    
181	}
182	
183	//--------------------------------------------
184	//	Scroll Event
185	//--------------------------------------------
186	function onScroll(){
187		
188		sc.scroll = $(this).scrollTop();
189		if( sc.scroll < tarPos ){
190      chgStat = false;
191		}else{
192      chgStat = true;
193		}
194    
195    if( saveStat != chgStat ){
196      if( chgStat ) {
197        boxOn();
198      }else{
199        boxOff();
200      }
201      saveStat = chgStat;
202    }
203	}
204
205});