<nav class="o-submenu m-nav-base m-nav-base--sep jq_anchor_menu">
	<ul class="m-nav-base__list">
		<li class="o-submenu__item m-nav-base__item">
			<input type="radio" name="o-submenu-26-44" class="o-submenu__state sr-only" checked>
			<a href="#section-01" class="o-submenu__link">Section 01</a>
			<!-- Skip the closing tag -->
		<li class="o-submenu__item m-nav-base__item">
			<input type="radio" name="o-submenu-26-44" class="o-submenu__state sr-only">
			<a href="#section-02" class="o-submenu__link">Section 02</a>
			<!-- Skip the closing tag -->
		<li class="o-submenu__item m-nav-base__item">
			<input type="radio" name="o-submenu-26-44" class="o-submenu__state sr-only">
			<a href="#section-03" class="o-submenu__link">Section 03</a>
			<!-- Skip the closing tag -->
		<li class="o-submenu__item m-nav-base__item">
			<input type="radio" name="o-submenu-26-44" class="o-submenu__state sr-only">
			<a href="#section-04" class="o-submenu__link">Section 04</a>
			<!-- Skip the closing tag -->
	</ul>
</nav>

<div id="section-01" class="a-anchor"></div>
<section class="m-section bg-gray-light py-3">
	<div class="container">
		<p><strong>Section 01</strong></p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla non arcu lacinia neque faucibus fringilla. Nulla est. Vivamus luctus egestas leo. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nullam sit amet magna in magna gravida vehicula. Pellentesque arcu. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Nulla pulvinar eleifend sem. Fusce aliquam vestibulum ipsum. Phasellus rhoncus. Pellentesque arcu. Vivamus porttitor turpis ac leo. Maecenas lorem. Et harum quidem rerum facilis est et expedita distinctio.</p>
		<p>Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Donec iaculis gravida nulla. Duis viverra diam non justo. Curabitur vitae diam non enim vestibulum interdum. Nullam eget nisl. Curabitur vitae diam non enim vestibulum interdum. Proin mattis lacinia justo. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Quisque porta. Donec quis nibh at felis congue commodo. Integer in sapien.</p>
	</div>
</section>

<div id="section-02" class="a-anchor"></div>
<section class="m-section py-3">
	<div class="container">
		<p><strong>Section 02</strong></p>
		<p>Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Nunc dapibus tortor vel mi dapibus sollicitudin. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque pretium lectus id turpis. Nullam rhoncus aliquam metus. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Etiam quis quam. Aenean vel massa quis mauris vehicula lacinia. Etiam neque. Etiam posuere lacus quis dolor. Duis condimentum augue id magna semper rutrum. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Integer imperdiet lectus quis justo. Aenean id metus id velit ullamcorper pulvinar. Vivamus ac leo pretium faucibus. Nulla non lectus sed nisl molestie malesuada. Quisque tincidunt scelerisque libero.</p>
		<p>Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Nullam eget nisl. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Praesent vitae arcu tempor neque lacinia pretium. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Nullam faucibus mi quis velit. Integer pellentesque quam vel velit. Pellentesque sapien. Praesent in mauris eu tortor porttitor accumsan. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Mauris dictum facilisis augue. Etiam quis quam. Nullam eget nisl.</p>
		<p>Ut tempus purus at lorem. Sed ac dolor sit amet purus malesuada congue. Etiam commodo dui eget wisi. Cras elementum. Duis pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam ornare wisi eu metus. Morbi scelerisque luctus velit. Vestibulum fermentum tortor id mi. Aenean id metus id velit ullamcorper pulvinar. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Integer lacinia. Mauris dictum facilisis augue. Nullam faucibus mi quis velit. Praesent id justo in neque elementum ultrices. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Nunc dapibus tortor vel mi dapibus sollicitudin. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Pellentesque ipsum.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla non arcu lacinia neque faucibus fringilla. Nulla est. Vivamus luctus egestas leo. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nullam sit amet magna in magna gravida vehicula. Pellentesque arcu. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Nulla pulvinar eleifend sem. Fusce aliquam vestibulum ipsum. Phasellus rhoncus. Pellentesque arcu. Vivamus porttitor turpis ac leo. Maecenas lorem. Et harum quidem rerum facilis est et expedita distinctio.</p>
	</div>
</section>

<div id="section-03" class="a-anchor"></div>
<section class="m-section bg-gray-light py-3">
	<div class="container">
		<p><strong>Section 03</strong></p>
		<p>Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Donec iaculis gravida nulla. Duis viverra diam non justo. Curabitur vitae diam non enim vestibulum interdum. Nullam eget nisl. Curabitur vitae diam non enim vestibulum interdum. Proin mattis lacinia justo. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Quisque porta. Donec quis nibh at felis congue commodo. Integer in sapien.</p>
		<p>Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Nunc dapibus tortor vel mi dapibus sollicitudin. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque pretium lectus id turpis. Nullam rhoncus aliquam metus. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Etiam quis quam. Aenean vel massa quis mauris vehicula lacinia. Etiam neque. Etiam posuere lacus quis dolor. Duis condimentum augue id magna semper rutrum. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Integer imperdiet lectus quis justo. Aenean id metus id velit ullamcorper pulvinar. Vivamus ac leo pretium faucibus. Nulla non lectus sed nisl molestie malesuada. Quisque tincidunt scelerisque libero.</p>
	</div>
</section>

<div id="section-04" class="a-anchor"></div>
<section class="m-section py-3">
	<div class="container">
		<p><strong>Section 04</strong></p>
		<p>Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Nullam eget nisl. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Praesent vitae arcu tempor neque lacinia pretium. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Nullam faucibus mi quis velit. Integer pellentesque quam vel velit. Pellentesque sapien. Praesent in mauris eu tortor porttitor accumsan. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Mauris dictum facilisis augue. Etiam quis quam. Nullam eget nisl.</p>
		<p>Ut tempus purus at lorem. Sed ac dolor sit amet purus malesuada congue. Etiam commodo dui eget wisi. Cras elementum. Duis pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam ornare wisi eu metus. Morbi scelerisque luctus velit. Vestibulum fermentum tortor id mi. Aenean id metus id velit ullamcorper pulvinar. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Integer lacinia. Mauris dictum facilisis augue. Nullam faucibus mi quis velit. Praesent id justo in neque elementum ultrices. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Nunc dapibus tortor vel mi dapibus sollicitudin. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Pellentesque ipsum.</p>
		<p>Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Donec iaculis gravida nulla. Duis viverra diam non justo. Curabitur vitae diam non enim vestibulum interdum. Nullam eget nisl. Curabitur vitae diam non enim vestibulum interdum. Proin mattis lacinia justo. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Quisque porta. Donec quis nibh at felis congue commodo. Integer in sapien.</p>
		<p>Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Nunc dapibus tortor vel mi dapibus sollicitudin. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque pretium lectus id turpis. Nullam rhoncus aliquam metus. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Etiam quis quam. Aenean vel massa quis mauris vehicula lacinia. Etiam neque. Etiam posuere lacus quis dolor. Duis condimentum augue id magna semper rutrum. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Integer imperdiet lectus quis justo. Aenean id metus id velit ullamcorper pulvinar. Vivamus ac leo pretium faucibus. Nulla non lectus sed nisl molestie malesuada. Quisque tincidunt scelerisque libero.</p>
	</div>
</section>

@import "molecules/nav-base/index";

.o-submenu {

    $self: &;

    background: color('white');
    position: sticky;
    text-align: center;
    top: 0;
    transition: top $base-transition ease-in-out;
    z-index: 9;

    @at-root {

        .headroom--top,
        .headroom--unpinned {

            + .main {

                #{$self} {

                    top: -1px;
                    transition-delay: $base-transition;

                }

            }

        }

    }

    &__state {

        &:checked {

            + #{$self}__link {

                color: color('gray-dark-extra');

            }

        }

    }

    &__link {

        @include text-underline(none);
        color:  color('gray');
        transition: color $base-transition;

    }

}

import $ from 'jquery';

import Polyfills from 'js-src/common/polyfills';

export default class AnchorMenu {
	constructor() {
		this.el = {};

		if (this.test()) {
			Polyfills.io(() => {
				this.setElements();

				if (this.el == null) {
					return;
				}

				this.viewport();
			});
		}
	}

	test() {
		return $('.jq_anchor_menu').length ? true : false;
	}

	setElements() {
		$('.jq_anchor_menu a[href*="#"]').each((index, element) => {
			var hash = $(element).prop('hash');

			if (hash !== '' && typeof hash !== 'undefined') {
				hash = hash.replace('#', '');

				this.el[hash] = {
					control: $(element),
					state: $(element).prev()
				};

				this.el[hash].state.val(hash);

				if ($('#' + hash).length > 0) {
					this.el[hash].section = $('#' + hash).next();
				}
			}
		});
	}

	viewport() {
		var intersection = new IntersectionObserver((items) => {
			$.each(items, (i, item) => {
				if (item.isIntersecting || item.intersectionRatio > 0) {
					var hash = $(item.target).prev().attr('id');

					if (typeof hash !== 'undefined') {
						this.el[hash].state.prop('checked', true);
					}

					return false;
				}
			});
		}, {
			root: $('.jq_observerRoot')[0] || null,
			rootMargin: '0% 0% -90%',
			threshold: 0
		});

		$.each(this.el, (hash, elements) => {
			intersection.observe(elements.section[0]);
		});
	}
}

$(() => new AnchorMenu);