https://www.goo-net.com/usedcar/common_v2/js/index_bodytype.js?250930

1var swiper = new Swiper(".squeezeTypeSwiper", {
2  slidesPerView: 7.6,
3  spaceBetween: 6,
4  freeMode: true,
5});
6let squeezeTypeList = document.querySelectorAll('.squeezeTypeSwiper .swiper-slide');
7for (let i = 0; i < squeezeTypeList.length; i++) {
8  if (!squeezeTypeList[i].classList.contains('chooseDiasbled')) {
9    squeezeTypeList[i].addEventListener('click', function () {
10      let flag = this.classList.contains('choosed');
11
12      const btsp = this.getAttribute('data-btsp');
13      if (!btsp) return;
14      const nameSelect1 = document.querySelectorAll('.box_nameSelect.js-main');
15      const nameSelect2 = document.querySelectorAll(`.box_nameSelect.js-50onBox-${btsp}`);
16      const nameSelectAll = document.querySelectorAll(".box_nameSelect[class*='js-50onBox-']");
17      const grayBoxesAll = document.querySelectorAll('.box_roundGray');
18      const targetBox1 = document.querySelectorAll('.box_roundGray.js-main');
19      const targetBox2 = document.querySelectorAll(`.box_roundGray.js-50onBox-${btsp}`);
20
21      for (let k = 0; k < squeezeTypeList.length; k++) {
22        squeezeTypeList[k].classList.remove('choosed');
23      }
24      if (flag) {
25        this.classList.remove('choosed');
26        clearAllCarSelections();
27        nameSelectAll.forEach(box => box.style.display = 'none');
28        grayBoxesAll.forEach(box => box.style.display = 'none');
29        nameSelect1.forEach(box => box.style.display = 'block');
30        targetBox1.forEach(box => box.style.display = 'block');
31      } else {
32        this.classList.add('choosed');
33        nameSelectAll.forEach(box => box.style.display = 'none');
34        grayBoxesAll.forEach(box => box.style.display = 'none');
35        nameSelect1.forEach(box => box.style.display = 'none');
36        targetBox1.forEach(box => box.style.display = 'none');
37        targetBox2.forEach(box => box.style.display = 'block');
38
39        const clones = [];
40        nameSelect2.forEach(box => {
41          const clone = box.cloneNode(true);
42          box.parentNode.replaceChild(clone, box);
43          clone.style.display = 'none';
44          clone.style.position = '';
45          clones.push(clone);
46        });
47
48        if (clones.length > 0) {
49          const newBox = clones[0];
50          newBox.style.display = 'block';
51          newBox.style.position = 'absolute';
52          newBox.style.top = '0px';
53          newBox.style.left = '0px';
54          const box = {
55            cont: $(newBox),
56            offsetTop: newBox.getBoundingClientRect().top + window.pageYOffset,
57            offsetHeight: newBox.offsetHeight,
58            margin: 0,
59            justify: null,
60            startNum: newBox.offsetTop
61          };
62
63          const parentCont = $(newBox.parentNode);
64          const parentTop = parentCont.offset().top;
65          const parentHeight = parentCont.outerHeight();
66
67          function updateBoxPosition() {
68            var pageScrollTop = $(window).scrollTop();
69            var boxHeight = parseInt(box.offsetHeight) + box.margin;
70
71            if (box.offsetTop - box.startNum > pageScrollTop) {
72              box.cont.css({
73                position: "absolute",
74                top: "0px",
75                left: "0px"
76              });
77            }
78            else if ((boxHeight + pageScrollTop) < (parentTop + parentHeight - 4 * boxHeight)) {
79              var bodytypeBoxLeft = parentCont.offset().left;;
80              var bodytypeScrLeft = $(window).scrollLeft();
81              box.cont.css({
82                position: "fixed",
83                top: "0px",
84                left: (bodytypeBoxLeft - bodytypeScrLeft) + "px"
85              });
86            }
87            else {
88              box.cont.css({
89                position: "absolute",
90                top: (parentHeight - 5 * boxHeight) + "px",
91                left: "0px"
92              });
93            }
94          }
95
96          updateBoxPosition();
97          $(window).off("scroll.newBox").on("scroll.newBox", updateBoxPosition);
98          $(window).off("resize.fixedBox").on("resize.fixedBox", function () {
99            if (box.cont.css('position') === 'fixed') {
100              updateBoxPosition();
101            }
102          });
103        }
104
105        clearAllCarSelections();
106      }
107    })
108  }
109}
110/* ¥Õ¥í¡¼¥Æ¥£¥ó¥°¥Ð¡¼¤Îleft¤Ï¿Æ¤Ë½¾¤¦ */
111const parent = document.querySelector('.scrollPadding');

112const fixedChild = document.querySelector('.scrollPadding .squeezeTypeFloat');
113function updateChildLeft() {
114  const parentLeft = parent.getBoundingClientRect().left;
115  fixedChild.style.left = `${parentLeft}px`;
116}
117updateChildLeft();
118window.addEventListener('resize', updateChildLeft);
119window.addEventListener('scroll', updateChildLeft);
120/* ¥¯¥ê¥¢ */
121let squeezeTypeClearBtn = document.querySelector('.squeezeTypeFloat .floatClear');
122let squeezeTypeCheckboxList = document.querySelectorAll('.squeezeTypeScroll input[type=checkbox]');
123let squeezeTypeFloatEL = document.querySelector('.squeezeTypeFloat');
124squeezeTypeClearBtn.addEventListener('click', function () {
125  for (let i = 0; i < squeezeTypeCheckboxList.length; i++) {
126    squeezeTypeCheckboxList[i].checked = false;
127  }
128  if (squeezeTypeFloatEL) {
129    squeezeTypeFloatEL.classList.remove('on');
130    clearAllCarSelections();
131  }
132})
133/* ¥Õ¥í¡¼¥Æ¥£¥ó¥°¥Ð¡¼¤Îbottom¤Ï¼Ö¼ï°ìÍ÷¤ÎºÇ¸å¤Þ¤Ç */
134function updateFloatingBar(){
135  const parentRect = parent.getBoundingClientRect();
136  const parentTop =parentRect.top + window.pageYOffset;
137  const parentHeight = parent.offsetHeight;
138  const pageScrollTop = window.pageYOffset;
139
140  if ((pageScrollTop + window.innerHeight - 40) > (parentTop + parentHeight)) {
141    squeezeTypeFloatEL.style.position = "absolute";
142    squeezeTypeFloatEL.style.bottom = "-40px";
143    squeezeTypeFloatEL.style.left = "0px";
144  }
145  else {
146    squeezeTypeFloatEL.style.position = "fixed";
147    squeezeTypeFloatEL.style.bottom = "0px";
148  }
149}
150updateFloatingBar();
151window.addEventListener('scroll', updateFloatingBar);
152window.addEventListener('resize', updateFloatingBar);
153
154function clearAllCarSelections() {
155  $("input[name='check_integration_car_cd[]']").each(function () {
156    if (this.checked) {
157      this.checked = false;
158      setCarCdHidden(this);
159    }
160  });
161
162  $('#rival_car, #no_rival_car, #active_car').hide();
163  $("#defaultArea").show();
164  $("input[name='integration_car_cd']").val("");
165  $("#rival_car .tit p").html('');
166  $("#rival_car .inner").html('');
167  $("#active_car .inner ul").html('');
168  $("#no_rival_car .tit p").html('');
169  let squeezeTypeFloatEL = document.querySelector('.squeezeTypeFloat');
170  if (squeezeTypeFloatEL) {
171    squeezeTypeFloatEL.classList.remove('on');
172  }
173}