{%- when 'navigation' -%}
{%- when 'navigation' -%}
<ul class="product__navigation" {{ block.shopify_attributes }}>
{% unless block.settings.navigation1_title == "" %}
<li class="product__navigation-item"><a href="#{{ block.settings.navigation1_id }}" class="product__navigation-link">{{ block.settings.navigation1_title }}</a></li>
{% endunless %}
{% unless block.settings.navigation2_title == "" %}
<li class="product__navigation-item"><a href="#{{ block.settings.navigation2_id }}" class="product__navigation-link">{{ block.settings.navigation2_title }}</a></li>
{% endunless %}
{% unless block.settings.navigation3_title == "" %}
<li class="product__navigation-item"><a href="#{{ block.settings.navigation3_id }}" class="product__navigation-link">{{ block.settings.navigation3_title }}</a></li>
{% endunless %}
{% unless block.settings.navigation4_title == "" %}
<li class="product__navigation-item"><a href="#{{ block.settings.navigation4_id }}" class="product__navigation-link">{{ block.settings.navigation4_title }}</a></li>
{% endunless %}
</ul>
<script>
window.addEventListener('DOMContentLoaded', () => {
const stickyHeader = document.querySelector('sticky-header');
const productNavigation = document.querySelector('.product__navigation');
let headerOffset = productNavigation.clientHeight;
const smoothScroll = (e) => {
e.preventDefault();
const target = document.querySelector(e.target.getAttribute('href'));
if (target) {
const targetRect = target.getBoundingClientRect();
let targetTop = window.pageYOffset + targetRect.top - headerOffset;
if(stickyHeader) {
const dataStickyType = stickyHeader.getAttribute('data-sticky-type');
const movingDiff = targetTop - window.scrollY;
if (dataStickyType == 'on-scroll-up') {
if (movingDiff < 0){
targetTop -= stickyHeader.clientHeight;
}
} else {
targetTop -= stickyHeader.clientHeight;
}
}
const mainProductTemplateTopPos = document.querySelector('[id^="MainProduct-template--"]').getBoundingClientRect().top;
if (mainProductTemplateTopPos >= 22) {
targetTop += 16
}
window.scrollTo({
top: targetTop,
behavior: 'smooth'
});
}
}
const setProductNavigationPos = () => {
if (stickyHeader) {
let stickyHeaderBottomPos = stickyHeader.getBoundingClientRect().top + stickyHeader.clientHeight;
if (stickyHeaderBottomPos < 0) stickyHeaderBottomPos = -1;
productNavigation.style.top = stickyHeaderBottomPos + "px";
}
productNavigationItems.forEach((item)=>{
const navigationLink = item.querySelector('.product__navigation-link');
const targetElement = document.querySelector(navigationLink.getAttribute('href'));
if (targetElement) {
const productNavigationBottom = productNavigation.getBoundingClientRect().bottom;
const targetElementTop = targetElement.getBoundingClientRect().top - 1;
const targetElementBottom = targetElement.getBoundingClientRect().bottom;
if(targetElementTop <= productNavigationBottom && targetElementBottom > productNavigationBottom) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
}
});
}
const productNavigationItems = document.querySelectorAll('.product__navigation-item');
if (productNavigationItems) {
productNavigationItems.forEach((item)=>{
const navigationLink = item.querySelector('.product__navigation-link');
navigationLink.addEventListener('click', smoothScroll);
});
window.addEventListener('scroll', setProductNavigationPos);
setProductNavigationPos();
}
});
</script>
<style>
.product__navigation {
position: sticky;
top: -1px;
z-index: 1;
background-color: #EEE;
border-bottom: 1px solid #CCC;
display: flex;
justify-content: space-around;
margin-top : 0;
padding: 0;
{% unless block.settings.navigation_margin_bottom == '' %}margin-bottom: {{ block.settings.navigation_margin_bottom }};{% endunless %}
}
.product__navigation li {
list-style-type: none;
padding: 10px;
border-bottom: 2px solid #EEE;
}
.product__navigation li.active {
border-bottom: 2px solid #000;
}
.product__navigation li a {
text-decoration: none;
color: #999;
}
.product__navigation li.active a {
color: #000;
}
@media screen and (min-width: 750px) {
.product__navigation li {
font-size: {{ block.settings.navigation_fontsize_desktop }}px;
}
}
@media screen and (max-width: 749px) {
.product__navigation li {
font-size: {{ block.settings.navigation_fontsize_mobile }}px;
}
}
</style>
{% schema %}
{
"type": "navigation",
"name": "ナビゲーション",
"limit": 1,
"settings": [
{
"type": "range",
"id": "navigation_fontsize_desktop",
"label": "フォントサイズ（デスクトップ）",
"min": 10,
"max": 20,
"step": 1,
"unit": "px",
"default": 20
},
{
"type": "range",
"id": "navigation_fontsize_mobile",
"label": "フォントサイズ（モバイル）",
"min": 10,
"max": 20,
"step": 1,
"unit": "px",
"default": 16
},
{
"type": "text",
"id": "navigation_margin_bottom",
"label": "底面マージン（px、emなど）",
"default": "0"
},
{
"type": "text",
"id": "navigation1_title",
"label": "ナビゲーション １：タイトル"
},
{
"type": "text",
"id": "navigation1_id",
"label": "ナビゲーション １：ID"
},
{
"type": "text",
"id": "navigation2_title",
"label": "ナビゲーション ２：タイトル"
},
{
"type": "text",
"id": "navigation2_id",
"label": "ナビゲーション ２：ID"
},
{
"type": "text",
"id": "navigation3_title",
"label": "ナビゲーション ３：タイトル"
},
{
"type": "text",
"id": "navigation3_id",
"label": "ナビゲーション ３：ID"
},
{
"type": "text",
"id": "navigation4_title",
"label": "ナビゲーション ４：タイトル"
},
{
"type": "text",
"id": "navigation4_id",
"label": "ナビゲーション ４：ID"
}
]
},
