概要

Produce_14s.mp4

設定方法

<div id="fixing-pin" class="on">
  <button>
    <span class="icon-on"><svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="<http://www.w3.org/2000/svg>"><path d="M26.586 11.314L28 9.9L18 0L16.686 1.415L17.872 2.601L6.38 12.322L4.664 10.607L3.25 12L8.907 17.677L0 26.583L1.41 28L10.321 19.091L16 24.748L17.393 23.334L15.677 21.618L25.401 10.128L26.586 11.314Z" fill="black"/></svg></span>
    <span class="icon-off"><svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="<http://www.w3.org/2000/svg>"><path d="M26.59 11.31L28 9.9L18 0L16.69 1.42L17.87 2.6L6.38 12.32L4.66 10.61L3.25 12L8.91 17.68L0 26.58L1.41 28L10.32 19.09L16 24.75L17.39 23.33L15.68 21.62L25.4 10.13L26.59 11.31ZM14.26 20.2L7.8 13.74L19.29 4L24 8.71L14.26 20.2Z" fill="black"/></svg></span>
  </button>
</div>
<script>
	// Cookie名を指定
	const cookieName = 'media-gallery-fixing';
	// Cookieに値をセットする関数
	const setCookie = (name, value, days) => {
	  const expires = days ? `; expires=${new Date(Date.now() + days * 864e5).toUTCString()}` : '';
	  document.cookie = `${name}=${value || ""}${expires}; path=/`;
	};
	// Cookieから値を取得する関数
	const getCookie = (name) => {
    const nameEQ = `${name}=`;
    return document.cookie.split(';').map(c => c.trim()).find(c => c.startsWith(nameEQ))?.substring(nameEQ.length) || null;
	};
	// ピンボタンの切り替えを行う関数
	const toggleFixingPin = (fixingPin) => {
	  const status = fixingPin.classList.contains('on') ? 'off' : 'on';
	  setFixingMediaGallery(fixingPin, status);
	};
	// on/offに応じて画像の固定/解除を行う関数
	const setFixingMediaGallery = (fixingPin, status) => {
    const gridItemProductMediaWrapper = document.querySelector('.grid__item.product__media-wrapper');
    if (gridItemProductMediaWrapper) {
      const isOn = (status == 'on');
      gridItemProductMediaWrapper.style.position = isOn ? 'sticky' : 'relative';
      fixingPin.classList.add(isOn ? 'on' : 'off');
      fixingPin.classList.remove(isOn ? 'off' : 'on');
      setCookie(cookieName, isOn ? 'on' : 'off', 90);
    }
	}
	// 初期設定
	window.addEventListener('DOMContentLoaded', (event) => {
		// 750px以下のviewportでのみ実行
		if (window.matchMedia('(max-width: 750px)').matches) {
	    const fixingPin = document.querySelector('#fixing-pin');
	    const gridItemProductMediaWrapper = document.querySelector('.grid__item.product__media-wrapper');
	    const mediaGallery = gridItemProductMediaWrapper.querySelector('media-gallery');
	    if (mediaGallery) {
	      mediaGallery.prepend(fixingPin);
	      fixingPin.style.display = 'block';
	      const fixingPinButton = fixingPin.querySelector('button');
	      fixingPinButton.addEventListener('click', () => toggleFixingPin(fixingPin));
	      const cookieValue = getCookie(cookieName) || 'on';
	      setFixingMediaGallery(fixingPin, cookieValue);
	    }
		}
	});
</script>
<style>
  @media screen and (max-width: 750px) {
    .grid__item.product__media-wrapper {
      position: sticky;
      top: 0;
      z-index: 2;
      background-color: #fff;
    }
  }
  #fixing-pin {
    position: absolute;
    top: 16px;
    right: 8px;
    z-index: 3;
    display: none;
  }
  #fixing-pin button {
    border: none;
    background: none;
  }
  #fixing-pin.on .icon-on,
  #fixing-pin.off .icon-off {
    display: block;
  }
  #fixing-pin.on .icon-off,
  #fixing-pin.off .icon-on {
    display: none;
  }
</style>