https://www.yano.co.jp/js/scroll.js?ver=1790907285

1
2
3var side_w2 = $('#side_w').width();
4var side_h = $('#side_w').height();
5var main_h = $('#yri-mr').height();
6var main_h = $('#yri-cat').height();
7var foot_h = $('#fh5co-footer').height();
8
9var idSide = 'side_w';
10
11if (!side_w2) {
12	idSide = 'side_w2';
13	side_w2 = $('#side_w2').width();
14}
15if (!side_h) {
16	side_h = $('#side_w2').height();
17}
18if (!main_h) {
19	main_h = $('#yri-press').height();
20}
21
22	console.log( side_h, main_h);
23	
24	if( main_h < side_h ) {
25		$('#page').css({
26			//2018.01.22
27			height : side_h + foot_h + 'px'
28		});
29	} else {
30/*
31		$('#page').css({
32			height : side_h + foot_h + 'px'
33		});
34*/
35		$('#fh5co-footer').css({
36			position : 'relative'
37		});
38	}
39
40
41$(window).on('load resize', function() {
42
43	fixedSidebar.run();
44
45	var window_w = window.innerWidth;
46	// var side_w2 = $('#' + idSide).width();
47	// console.log(side_w2, side_h2);
48	$('.fixnav').css({
49		width : side_w2 + 'px'
50	});
51
52
53
54//	console.log(window_w + 'px ');
55	if(window_w > 991) {
56		$('.side').css({
57			float : 'left',
58			margin : '0 -15px',
59			padding : '0'
60//			padding : '0 15px 0 0'
61		});
62		fixedSidebar.run();
63	}else{
64		$('.side').css({
65			float : 'left',
66			margin : '0.8em auto 0.4em'
67//			margin : '0.8em 0 0.4em -0.4em'
68//			margin : ' 0 auto'
69//			padding : '0 15px 0 0'
70		});
71//		sidebox_w = document.getElementById('side-box').clientWidth;
72//		$('.fixnav').css({
73//			position : 'relative',
74//			top : '0px',	//(nav_h + 10) + 'px',	//'0px',
75//			width: (sidebox_w) +'px'
76//		});
77	}
78});
79
80
81
82var fixedSidebar = (function() {
83
84
85	var side_ww = document.getElementById(idSide).clientWidth;
86//	console.log(side_ww);
87
88	var navi,
89			wrap,
90			wrap_scroll,
91			fixed_start,
92			fixpx_end_top,
93			sidebox_w,
94			nav_h;
95	return {
96		run : function() {
97			// サイドバーの固定するレイヤー
98			navi = $('.fixnav');
99			// ラッパーのレイヤー
100			wrap = $('.scroll-wrap');
101
102			sidebox_w = document.getElementById('side-box').clientWidth;
103			nav_h = document.getElementById('scrollnav').clientHeight;
104
105//			console.log(sidebox_w + 'px ' + nav_h + 'px');
106//			$('#side-box').fadeIn(1000);
107
108			this.refresh();
109		},
110		refresh : function() {
111			navi.css({
112				position : 'relative',
113				top : 'auto',
114				width: side_w2 +'px'	//'100%'
115//				width: side_ww			//'100%'
116			});
117			var navi_top = navi.offset().top;
118			var wrap_top = wrap.offset().top;
119			// 開始位置：ナビのTOP
120			fixed_start = navi_top - parseInt(navi.css('margin-top'));
121			// スクロールする上限
122			// fixpx_end_top = wrap_top + wrap.outerHeight() - navi.outerHeight(true);
123			fixpx_end_top = wrap_top + wrap.outerHeight() - navi.children('div').outerHeight(true);
124			// console.log(wrap_top);
125			// console.log(navi.height());
126			// console.log(navi.outerHeight(true));
127			// console.log(fixpx_end_top);
128			wrap_scroll = fixpx_end_top;
129			if(navi_top + navi.outerHeight(true) < wrap_top + wrap.outerHeight(true)) {
130				$(window).off('scroll', _onScroll).on('scroll', _onScroll);
131			} else {
132				$(window).off('scroll', _onScroll);
133			}
134			$(window).trigger('scroll');
135		}
136	};
137	function _onScroll() {
138	
139		var bw = $(window).width();
140		var ws = $(window).scrollTop();
141		// console.log(ws + 'px ' + fixpx_end_top + 'px ' + nav_h + 'px ' + fixed_start);
142
143		if( bw < 975 ){
144			// console.log("1");
145//			console.log( bw );
146			navi.css({
147				position : 'relative',
148				float : 'left',
149				margin : '0.8em auto 2.4em'
150				//margin : '0.8em 0 0.4em 0.8em'
151				//width: '100%'
152			});
153		} else {
154			if(ws > fixpx_end_top) {
155				// console.log("2");
156				// 固定する上限
157				navi.css({
158					position : 'fixed',
159					top : (fixpx_end_top - ws) + 'px'
160				});
161//				console.log("固定する上限");
162			} else if(ws > fixed_start - 108) {
163				// console.log("3");
164				// 固定中間
165				navi.css({
166					position : 'fixed',
167					top : (nav_h + 12) + 'px'
168				});
169//				console.log("固定中間");
170			} else {
171				// console.log("4");
172				// 固定開始まで
173				navi.css({
174					position : 'relative',
175					top : '0px',	//(nav_h + 10) + 'px',	//'0px',
176					width: (sidebox_w) +'px'
177				});
178//				console.log("固定開始まで");
179			}
180		}
181	}
182})();
183
184