https://mojiko.info/js/toggle.js

1$(function () {
2
3	
4	//トグル
5	$('#toggle').on('click', function () {
6		$(this).toggleClass('active');
7		$('#overlay').toggleClass('open');
8		$('html').toggleClass('flowhidden1');
9		//toggle2のクラスがactiveの時にはIOSでタッチ機能をキャンセル
10		if ($(this).hasClass('active')) {
11		
12	$(window).on('touchmove.noScroll', function(e) {
13        e.preventDefault();
14	});
15	
16	} else {
17		$(window).off('.noScroll');
18		}
19	
20    });
21
22
23	//トグル2
24
25	$('#toggle2').on('click.cl1', function () {
26		$(this).toggleClass('active');
27		$('#overlay2').toggleClass('open');
28        $('html').toggleClass('flowhidden2');
29		
30	//toggle2のクラスがactiveの時にはIOSでタッチ機能をキャンセル
31		if ($(this).hasClass('active')) {
32		
33	$(window).on('touchmove.noScroll', function(e) {
34        e.preventDefault();
35	});
36	
37	} else {
38		$(window).off('.noScroll');
39		}
40	
41    });
42	
43	//スティッキーヘッダー
44	var $window = $(window), //ウィンドウを指定
45		$content = $("#content"), //#content部分
46		$chenge = $("#change"), //#change部分
47		topContent = $content.offset().top; //#contentの位置を取得
48
49	var sticky = false;
50
51	$window.on("scroll", function () {
52		if ($window.scrollTop() > topContent) {　 //scroll位置が#contentの上にある場合
53			if (sticky === false) {
54				$chenge.fadeIn();　 //#change部分が上がる。	
55				
56				sticky = true;
57			}
58		} else {
59			if (sticky === true) {　 //scroll位置が下にある場合		
60				$chenge.fadeOut(); //#change部分が降りてくる。
61		        $('#toggle2').removeClass('active');	
62		        $('#overlay2').removeClass('open');
63		        
64		
65				sticky = false;
66			}
67		}
68	});
69	$window.trigger("scroll");
70
71
72//スライダー02	
73	
74	// Params
75let mainSliderSelector = '.main-slider',
76    navSliderSelector = '.nav-slider',
77    interleaveOffset = 0.5;
78
79// Main Slider
80let mainSliderOptions = {
81      loop: true,
82      speed:1000,
83      autoplay:{
84        delay:3000
85      },
86      loopAdditionalSlides: 10,
87      grabCursor: true,
88      watchSlidesProgress: true,
89      navigation: {
90        nextEl: '.swiper-button-next',
91        prevEl: '.swiper-button-prev',
92      },
93      on: {
94        init: function(){
95          this.autoplay.stop();
96        },
97        imagesReady: function(){
98          this.el.classList.remove('loading');
99          this.autoplay.start();
100        },
101        slideChangeTransitionEnd: function(){
102          let swiper = this,
103              captions = swiper.el.querySelectorAll('.caption');
104          for (let i = 0; i < captions.length; ++i) {
105            captions[i].classList.remove('show');
106          }
107          swiper.slides[swiper.activeIndex].querySelector('.caption').classList.add('show');
108        },
109        progress: function(){
110          let swiper = this;
111          for (let i = 0; i < swiper.slides.length; i++) {
112            let slideProgress = swiper.slides[i].progress,
113                innerOffset = swiper.width * interleaveOffset,
114                innerTranslate = slideProgress * innerOffset;
115           
116            swiper.slides[i].querySelector(".slide-bgimg").style.transform =
117              "translateX(" + innerTranslate + "px)";
118          }
119        },
120        touchStart: function() {
121          let swiper = this;
122          for (let i = 0; i < swiper.slides.length; i++) {
123            swiper.slides[i].style.transition = "";
124          }
125        },
126        setTransition: function(speed) {
127          let swiper = this;
128          for (let i = 0; i < swiper.slides.length; i++) {
129            swiper.slides[i].style.transition = speed + "ms";
130            swiper.slides[i].querySelector(".slide-bgimg").style.transition =
131              speed + "ms";
132          }
133        }
134      }
135    };
136let mainSlider = new Swiper(mainSliderSelector, mainSliderOptions);
137
138// Navigation Slider
139let navSliderOptions = {
140      loop: true,
141      loopAdditionalSlides: 10,
142      speed:1000,
143      spaceBetween: 5,
144      slidesPerView: 5,
145      centeredSlides : true,
146      touchRatio: 0.2,
147      slideToClickedSlide: true,
148      direction: 'vertical',
149      on: {
150        imagesReady: function(){
151          this.el.classList.remove('loading');
152        },
153        click: function(){
154          mainSlider.autoplay.stop();
155        }
156      }
157    };
158let navSlider = new Swiper(navSliderSelector, navSliderOptions);
159
160// Matching sliders
161mainSlider.controller.control = navSlider;
162navSlider.controller.control = mainSlider;
163	
164
165});
166
167
168
169
170