https://only.co.jp/assets/js/script.js?=ver20211209

1var widthFlag = '';
2$(function() {
3    // 画面サイズのチェック
4    $(window).on('load resize', function() {
5        widthCheck();
6
7    });
8});
9
10// 画面サイズのチェック
11function widthCheck() {
12    // 画面幅取得
13    var winWidth = $(window).width();
14    if (winWidth <= 768 && widthFlag != 'sp') {
15        // フラグをSPに変更
16        widthFlag = 'sp';
17        //slick
18        $('.slider.slick-initialized').slick('unslick');
19        //header
20        $(function() {
21            var pos = 1;
22            var header = $('.l-header');
23
24            $(window).on('scroll', function() {
25                var scroll = $(this).scrollTop();
26               var positionUtilityBtn = 87 - scroll;
27                var positionDesc = 61 - scroll;
28                if($(this).scrollTop() == 0){
29                    //上スクロール時の処理
30                    header.removeClass('is-scroll');
31                    $('.has-header__bnr .l-header').removeAttr('style');
32                    $('.header__utilityBtn').removeAttr('style');
33                    $('.header__description').removeAttr('style');
34                    $('.header__description').fadeIn('slow');
35                }else if ($(this).scrollTop() < pos) {
36                    header.removeClass('is-scroll');
37                    $('.has-header__bnr .l-header').removeAttr('style');
38                    $('.header__utilityBtn').css({ 'top': 60 });
39                    $('.header__description').hide();
40                    $('.header__description').fadeIn('slow');
41
42                } else {
43                    //下スクロール時の処理
44                    header.addClass('is-scroll');
45                    $('.header__utilityBtn').css({ 'top': positionUtilityBtn });
46                    $('.header__description').css({ 'top': positionDesc });
47                    $('.header__description').fadeOut('fast');
48                }
49                pos = $(this).scrollTop();
50            });
51        });
52
53    } else if (winWidth > 768 && widthFlag != 'pc') {
54        widthFlag = 'pc';
55        //slick
56        $('.js-product_slider').slick({
57            autoplay: false,
58            lazyLoad: 'ondemand',
59            autoplaySpeed: 3000,
60            dots: true,
61            slidesToShow: 4,
62            slidesToScroll: 1,
63            prevArrow: '<button type="button" class="js-product_slider__prev"><img src="/assets/images/icon_arrow_prev.svg" alt="PREV"></button>',
64            nextArrow: '<button type="button" class="js-product_slider__next"><img src="/assets/images/icon_arrow_next.svg" alt="NEXT"></button>',

65            dotsClass: 'js-product_slider-dots',
66        });
67        //header navi
68        
69    }
70};
71
72// Header Navi
73$(function() {
74    var winWidth = $(window).width();
75    if(winWidth <= 768){
76      //header navi
77      $('.header__gnavi .__hasChild >a').on('click', function(e) {
78        e.preventDefault();
79        $('.header__gnavi .__hasChild >a').not($(this)).parent().removeClass('is-active').find('.__child').slideUp();
80        $(this).parent().toggleClass('is-active').find('.__child').stop().slideToggle();
81      });
82      //footer link
83      $('.js-footer-title').on('click', function(e) {
84          e.preventDefault();
85          $('.js-footer-title').not($(this)).removeClass('is-active').next().slideUp();
86          $(this).toggleClass('is-active').next().stop().slideToggle();
87      });
88    } else{
89      $(".header__gnavi .__hasChild").mouseover(function() {
90          $(this).addClass('is-active');
91          var subNavheight = $(this).children('.__child').outerHeight()+1;
92          $("#header").addClass('is-subNavOpen');
93          $('.is-subNavOpen .header_navCover').css({ 'height': subNavheight });;
94      });
95      $(".header__gnavi .__hasChild").mouseout(function() {
96          $(".__hasChild").removeClass('is-active');
97          $("#header").removeClass('is-subNavOpen');
98      });
99    }
100});
101
102$(window).on('load', function() {
103    if (document.getElementById("header__bnr") != null) {
104        $('body').addClass('has-header__bnr');
105    } else {
106        $('body').removeClass('has-header__bnr');
107    }
108});
109
110
111$(function() {
112    $('#l-header-gnaviBtn').on('click', function() {
113        $('body').toggleClass('is-sp-nav--open');
114    });
115    $('.header_navCover').on('click', function() {
116        $('body').removeClass('is-sp-nav--open');
117    });
118});
119
120$(function() {
121    $('.js-product_slider02').slick({
122        autoplay: false,
123        dots: true,
124        prevArrow: '<button type="button" class="js-product_slider02__prev"><img src="/assets/images/icon_arrow_wh_prev.svg" alt="PREV"></button>',
125        nextArrow: '<button type="button" class="js-product_slider02__next"><img src="/assets/images/icon_arrow_wh_next.svg" alt="NEXT"></button>',
126        dotsClass: 'js-product_slider02-dots',
127    });
128});
129
130//header item btn
131$(window).on('load',function(){
132    $('.utilityListItem_item').click(function () {
133        $("body").addClass('is-itemModalnavOpen');
134        $(".utilityListItem_itemModal").find('.is-active').removeClass("is-active");
135        $("._itemModal-list__item > a").click(function () {
136            $("._itemModal-list__item > a").not(this).removeClass('is-active'); 
137            if ($(this).hasClass('is-active')) {
138                $(this).removeClass('is-active');                
139            } else {
140                $(this).addClass('is-active');                
141            }           
142         });
143    });
144    $('#itemModalCloseBtn').click(function () {
145        $("body").removeClass('is-itemModalnavOpen');
146        $(".utilityListItem_itemModal").find('.is-active').removeClass("is-active");
147    });    
148});