https://www.sunplanet.co.jp/assets/js/top.js

1document.addEventListener("DOMContentLoaded", function () {
2	const UA = window.navigator.userAgent.toLowerCase();
3	if (UA.indexOf('msie') != -1 || UA.indexOf('trident') != -1) {
4		let target = document.querySelector('.js-scroll_down');
5		target.classList.remove('js-scroll_down');
6	}else {
7		setTimeout(function () {
8			scroll_down();
9		}, 500);
10	}
11});
12
13
14var topMvSwiper = new Swiper('.js-mv-swiper', {
15	effect: 'fade',
16	loop: true,
17	speed: 1000,
18	allowTouchMove: false,
19	preloadImages: false,
20	lazy: {
21		loadPrevNext: true,
22		loadOnTransitionStart: true,
23		loadPrevNextAmount: 2
24	}
25});
26
27jQuery(function($) {
28	$('.swiper-play').on('load', function () {
29		$('.top__main .fadeup-animation-hook').waypoint(function (direction) {
30			var target = $(this.element).find('.fadeup-target');
31			if (direction === 'down') {
32				target.addClass('in-view');
33			}
34		}, { offset: '70%' });
35		topMvSwiper.on('lazyImageReady', function () {
36			topMvSwiper.autoplay.start();
37		})
38	})
39});
40
41var topPersonSwiper = new Swiper('.js-person-swiper', {
42	loop: true,
43	spaceBetween: 40,
44	pagination: {
45		el: '.person-swiper',
46		clickable: true,
47	},
48	navigation: {
49		nextEl: '.swiper-button-next',
50		prevEl: '.swiper-button-prev',
51	},
52
53	breakpoints: {
54		768: {
55			loopAdditionalSlides: 4,
56			slidesPerView: 1.15,
57			centeredSlides: true,
58			spaceBetween: 20,
59			initialSlide: 0,
60		}
61	}
62});
63
64function scroll_down() {
65	let target = document.querySelector('.js-scroll_down');
66	const main = document.querySelector('main');
67	const parent = target.parentNode;
68	const nextEle = parent.nextElementSibling;
69	let mainTop = window.pageYOffset + main.getBoundingClientRect().top;
70	let targetHeight = target.clientHeight;
71
72	const wrapper = document.createElement('div');

73	const imgBox = document.createElement('div');
74	const img = document.createElement('img');
75	wrapper.classList.add('scroll_down');
76	imgBox.classList.add('scroll_down-icon');
77	img.src = '/assets/img/common/scroll_down.png';
78	main.insertBefore(wrapper, nextEle);
79	imgBox.appendChild(img);
80	wrapper.appendChild(imgBox);
81	let wrapperTop = window.pageYOffset + wrapper.getBoundingClientRect().top;
82	let wrapperHeight = document.body.clientHeight - wrapperTop;
83	wrapper.style.height = document.documentElement.clientHeight + 'px';
84
85	if (document.documentElement.clientWidth <= 768) {
86		wrapper.style.display = 'none';
87	} else {
88		parent.style.paddingTop = targetHeight + 'px';
89		target.style.top = mainTop + 'px';
90		target.style.position = 'fixed';
91	}
92
93  window.addEventListener('resize', function () {
94		target = document.querySelector('.js-scroll_down');
95		mainTop = window.pageYOffset + main.getBoundingClientRect().top;
96		targetHeight = target.clientHeight;
97		if (document.documentElement.clientWidth <= 768) {
98			target.style.top = '';
99			target.style.position = '';
100			parent.style.paddingTop = '';
101			wrapper.style.display = 'none';
102		} else {
103			parent.style.paddingTop = targetHeight + 'px';
104			target.style.top = mainTop + 'px';
105			target.style.position = 'fixed';
106			wrapperTop = window.pageYOffset + wrapper.getBoundingClientRect().top;
107			wrapperHeight = document.body.clientHeight - wrapperTop;
108			wrapper.style.display = 'block'
109			wrapper.style.height = document.documentElement.clientHeight + 'px';
110		}
111	});
112
113	window.addEventListener('scroll', function () {
114		if (window.pageYOffset <= wrapperTop) {
115			wrapper.style.position = 'absolute';
116			wrapper.style.top = '';
117		}
118		if (wrapper.getBoundingClientRect().top <= 0) {
119			wrapper.style.position = 'fixed';
120			wrapper.style.top = '0';
121		}
122	})
123
124}