There are no notes for this item.
<div class="wrap margin-top-xl margin-bottom-xl">
<div class="title title--has-tail js-waypoint">
<h1 class="h1 title__highlight">In-page sticky waypoint navigation</h1>
</div>
</div>
<nav class="page-nav js-page-nav" id="js-page-nav">
<div class="page-nav__stickyContainer">
<div class="wrap">
<div class="page-nav__inner">
<ul class="page-nav__list">
<li class="page-nav__item"><a class="page-nav__link is-active" href="#overview">Overview</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#courses">Courses</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#facilities">Facilities</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#work-experience-and-careers">Work experience and careers</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#our-students">Our students</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#our-staff">Our staff</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#our-graduates">Our Graduates</a></li>
</ul>
</div>
</div>
</div>
</nav>
<section class="margin-bottom-6xl js-waypoint-page-section" id="overview">
<header class="section-header section-header--bg-offwhite section-header--border-top">
<div class="wrap">
<div class="section-header__title title title--has-tail js-waypoint">
<h2 class="h2 title__highlight">Overview</h2>
</div>
</div>
</header>
<div class="wrap">
<p class="intro"><strong>These sections must have a class of <code>js-waypoint-page-section</code>, and the <code>id</code> of their corresponding link's <code>href</code></strong></p>
<p class="intro">When each waypoint is reached, the nav updates to current page section.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
<section class="margin-bottom-6xl js-waypoint-page-section" id="courses">
<header class="section-header section-header--bg-offwhite section-header--border-top">
<div class="wrap">
<div class="section-header__title title title--has-tail js-waypoint">
<h2 class="h2 title__highlight">Courses</h2>
</div>
</div>
</header>
<div class="wrap">
<p class="intro"><strong>These sections must have a class of <code>js-waypoint-page-section</code>, and the <code>id</code> of their corresponding link's <code>href</code></strong></p>
<p class="intro">When each waypoint is reached, the nav updates to current page section.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
<section class="margin-bottom-6xl js-waypoint-page-section" id="facilities">
<header class="section-header section-header--bg-offwhite section-header--border-top">
<div class="wrap">
<div class="section-header__title title title--has-tail js-waypoint">
<h2 class="h2 title__highlight">Facilities</h2>
</div>
</div>
</header>
<div class="wrap">
<p class="intro"><strong>These sections must have a class of <code>js-waypoint-page-section</code>, and the <code>id</code> of their corresponding link's <code>href</code></strong></p>
<p class="intro">When each waypoint is reached, the nav updates to current page section.</p>
</div>
</section>
<section class="margin-bottom-6xl js-waypoint-page-section" id="work-experience-and-careers">
<header class="section-header section-header--bg-offwhite section-header--border-top">
<div class="wrap">
<div class="section-header__title title title--has-tail js-waypoint">
<h2 class="h2 title__highlight">Work experience and careers</h2>
</div>
</div>
</header>
<div class="wrap">
<p class="intro"><strong>These sections must have a class of <code>js-waypoint-page-section</code>, and the <code>id</code> of their corresponding link's <code>href</code></strong></p>
<p class="intro">When each waypoint is reached, the nav updates to current page section.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
<section class="margin-bottom-6xl js-waypoint-page-section" id="our-students">
<header class="section-header section-header--bg-offwhite section-header--border-top">
<div class="wrap">
<div class="section-header__title title title--has-tail js-waypoint">
<h2 class="h2 title__highlight">Our students</h2>
</div>
</div>
</header>
<div class="wrap">
<p class="intro"><strong>These sections must have a class of <code>js-waypoint-page-section</code>, and the <code>id</code> of their corresponding link's <code>href</code></strong></p>
<p class="intro">When each waypoint is reached, the nav updates to current page section.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
<section class="margin-bottom-6xl js-waypoint-page-section" id="our-staff">
<header class="section-header section-header--bg-offwhite section-header--border-top">
<div class="wrap">
<div class="section-header__title title title--has-tail js-waypoint">
<h2 class="h2 title__highlight">Our Staff</h2>
</div>
</div>
</header>
<div class="wrap">
<p class="intro"><strong>These sections must have a class of <code>js-waypoint-page-section</code>, and the <code>id</code> of their corresponding link's <code>href</code></strong></p>
<p class="intro">When each waypoint is reached, the nav updates to current page section.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
<section class="margin-bottom-6xl js-waypoint-page-section" id="our-graduates">
<header class="section-header section-header--bg-offwhite section-header--border-top">
<div class="wrap">
<div class="section-header__title title title--has-tail js-waypoint">
<h2 class="h2 title__highlight">Our graduates</h2>
</div>
</div>
</header>
<div class="wrap">
<p class="intro"><strong>These sections must have a class of <code>js-waypoint-page-section</code>, and the <code>id</code> of their corresponding link's <code>href</code></strong></p>
<p class="intro">When each waypoint is reached, the nav updates to current page section.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
<footer class="footer-site">
<div class="wrap">
<a class="footer-site__logo" title="Home" href="/">
<img src="../../img/logo.png" alt="Staffordshire University Logo">
</a>
<div class="footer-site__main">
<div class="grid grid--spaced">
<div class="col-3/5 col-reverse">
<div class="grid grid--spaced grid-3-cols">
<div>
<h6>Study list</h6>
<ul class="list--unstyled list--links">
<li><a href="">Undergraduate</a></li>
<li><a href="">Postgraduate</a></li>
<li><a href="">Part-time</a></li>
<li><a href="">Professional</a></li>
<li><a href="">Distance learning</a></li>
<li><a href="">Two-year accelerated degrees</a></li>
<li><a href="">Partnerships</a></li>
</ul>
</div>
<div>
<h6>Information for</h6>
<ul class="list--unstyled list--links">
<li><a href="">Current students</a></li>
<li><a href="">Current staff</a></li>
<li><a href="">Schools and colleges</a></li>
<li><a href="">Alumni</a></li>
</ul>
</div>
<div>
<h6>Also see</h6>
<ul class="list--unstyled list--links">
<li><a href="">A-Z index</a></li>
<li><a href="">News</a></li>
<li><a href="">Events</a></li>
<li><a href="">Job vacancies</a></li>
<li><a href="">Legal</a></li>
<li><a href="">Accessibility</a></li>
<li><a href="">Modern slavery</a></li>
<li><a href="">Transparency return</a></li>
</ul>
</div>
</div>
<h6>Connect with us</h6>
<ul class="list--inline footer-site__social-list">
<li><a href=""><i class="icon"><img src="../../img/icon-facebook-white.svg" alt="Facebook" /></i></a></li>
<li><a href=""><i class="icon"><img src="../../img/icon-twitter-white.svg" alt="Twitter" /></i></a></li>
<li><a href=""><i class="icon"><img src="../../img/icon-youtube-white.svg" alt="YouTube" /></i></a></li>
<li><a href=""><i class="icon"><img src="../../img/icon-pinterest-white.svg" alt="Pinterest" /></i></a></li>
<li><a href=""><i class="icon"><img src="../../img/icon-linkedin-white.svg" alt="LinkedIn" /></i></a></li>
<li><a href=""><i class="icon"><img src="../../img/icon-instagram-white.svg" alt="Instagram" /></i></a></li>
<li><a href=""><i class="icon"><img src="../../img/icon-snapchat-white.svg" alt="Snapchat" /></i></a></li>
</ul>
</div>
<div class="col-2/5">
<h6><strong>Staffordshire University</strong></h6>
<p>
College Road<br />
University Quarter<br />
Stoke-on-Trent<br />
Staffordshire ST4 2DE<br />
</p>
<p>+44 (0)1782 294000</p>
<p><a href="">Contact us</a></p>
<p>© Staffordshire University 2020</p>
</div>
</div>
</div>
</div>
</footer>
<div class="wrap margin-top-xl margin-bottom-xl">
<div class="title title--has-tail js-waypoint">
<h1 class="h1 title__highlight">In-page sticky waypoint navigation</h1>
</div>
</div>
<nav class="page-nav js-page-nav" id="js-page-nav">
<div class="page-nav__stickyContainer">
<div class="wrap">
<div class="page-nav__inner">
<ul class="page-nav__list">
<li class="page-nav__item"><a class="page-nav__link is-active" href="#overview">Overview</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#courses">Courses</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#facilities">Facilities</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#work-experience-and-careers">Work experience and careers</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#our-students">Our students</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#our-staff">Our staff</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#our-graduates">Our Graduates</a></li>
</ul>
</div>
</div>
</div>
</nav>
<section class="margin-bottom-6xl js-waypoint-page-section" id="overview">
<header class="section-header section-header--bg-offwhite section-header--border-top">
<div class="wrap">
<div class="section-header__title title title--has-tail js-waypoint">
<h2 class="h2 title__highlight">Overview</h2>
</div>
</div>
</header>
<div class="wrap">
<p class="intro"><strong>These sections must have a class of <code>js-waypoint-page-section</code>, and the <code>id</code> of their corresponding link's <code>href</code></strong></p>
<p class="intro">When each waypoint is reached, the nav updates to current page section.</p>
<p>{{ lorem }} {{ lorem }}</p>
<p>{{ lorem }} {{ lorem }}</p>
</div>
</section>
<section class="margin-bottom-6xl js-waypoint-page-section" id="courses">
<header class="section-header section-header--bg-offwhite section-header--border-top">
<div class="wrap">
<div class="section-header__title title title--has-tail js-waypoint">
<h2 class="h2 title__highlight">Courses</h2>
</div>
</div>
</header>
<div class="wrap">
<p class="intro"><strong>These sections must have a class of <code>js-waypoint-page-section</code>, and the <code>id</code> of their corresponding link's <code>href</code></strong></p>
<p class="intro">When each waypoint is reached, the nav updates to current page section.</p>
<p>{{ lorem }} {{ lorem }}</p>
<p>{{ lorem }} {{ lorem }}</p>
</div>
</section>
<section class="margin-bottom-6xl js-waypoint-page-section" id="facilities">
<header class="section-header section-header--bg-offwhite section-header--border-top">
<div class="wrap">
<div class="section-header__title title title--has-tail js-waypoint">
<h2 class="h2 title__highlight">Facilities</h2>
</div>
</div>
</header>
<div class="wrap">
<p class="intro"><strong>These sections must have a class of <code>js-waypoint-page-section</code>, and the <code>id</code> of their corresponding link's <code>href</code></strong></p>
<p class="intro">When each waypoint is reached, the nav updates to current page section.</p>
</div>
</section>
<section class="margin-bottom-6xl js-waypoint-page-section" id="work-experience-and-careers">
<header class="section-header section-header--bg-offwhite section-header--border-top">
<div class="wrap">
<div class="section-header__title title title--has-tail js-waypoint">
<h2 class="h2 title__highlight">Work experience and careers</h2>
</div>
</div>
</header>
<div class="wrap">
<p class="intro"><strong>These sections must have a class of <code>js-waypoint-page-section</code>, and the <code>id</code> of their corresponding link's <code>href</code></strong></p>
<p class="intro">When each waypoint is reached, the nav updates to current page section.</p>
<p>{{ lorem }} {{ lorem }}</p>
<p>{{ lorem }} {{ lorem }}</p>
<p>{{ lorem }} {{ lorem }}</p>
<p>{{ lorem }} {{ lorem }}</p>
</div>
</section>
<section class="margin-bottom-6xl js-waypoint-page-section" id="our-students">
<header class="section-header section-header--bg-offwhite section-header--border-top">
<div class="wrap">
<div class="section-header__title title title--has-tail js-waypoint">
<h2 class="h2 title__highlight">Our students</h2>
</div>
</div>
</header>
<div class="wrap">
<p class="intro"><strong>These sections must have a class of <code>js-waypoint-page-section</code>, and the <code>id</code> of their corresponding link's <code>href</code></strong></p>
<p class="intro">When each waypoint is reached, the nav updates to current page section.</p>
<p>{{ lorem }} {{ lorem }}</p>
<p>{{ lorem }} {{ lorem }}</p>
</div>
</section>
<section class="margin-bottom-6xl js-waypoint-page-section" id="our-staff">
<header class="section-header section-header--bg-offwhite section-header--border-top">
<div class="wrap">
<div class="section-header__title title title--has-tail js-waypoint">
<h2 class="h2 title__highlight">Our Staff</h2>
</div>
</div>
</header>
<div class="wrap">
<p class="intro"><strong>These sections must have a class of <code>js-waypoint-page-section</code>, and the <code>id</code> of their corresponding link's <code>href</code></strong></p>
<p class="intro">When each waypoint is reached, the nav updates to current page section.</p>
<p>{{ lorem }} {{ lorem }}</p>
<p>{{ lorem }} {{ lorem }}</p>
<p>{{ lorem }} {{ lorem }}</p>
<p>{{ lorem }} {{ lorem }}</p>
<p>{{ lorem }} {{ lorem }}</p>
<p>{{ lorem }} {{ lorem }}</p>
</div>
</section>
<section class="margin-bottom-6xl js-waypoint-page-section" id="our-graduates">
<header class="section-header section-header--bg-offwhite section-header--border-top">
<div class="wrap">
<div class="section-header__title title title--has-tail js-waypoint">
<h2 class="h2 title__highlight">Our graduates</h2>
</div>
</div>
</header>
<div class="wrap">
<p class="intro"><strong>These sections must have a class of <code>js-waypoint-page-section</code>, and the <code>id</code> of their corresponding link's <code>href</code></strong></p>
<p class="intro">When each waypoint is reached, the nav updates to current page section.</p>
<p>{{ lorem }} {{ lorem }}</p>
<p>{{ lorem }} {{ lorem }}</p>
</div>
</section>
{% include '@page-footer' %}
.page-nav {
min-height: #{$spacing-md + $spacing-xl + $spacing-md};
$background: white;
--background: #{$background};
--backgroundRGB: #{red($background)}, #{green($background)}, #{blue($background)};
&__stickyContainer {
// we'd be doing this with position sticky, but IE,
// and the need to change colour on attachment means we're using waypoints instead, sorry.
//position: sticky;
top: 0;
left: $body-border-width;
right: 0;
z-index: 9;
//transition: all 200ms;
@media (min-width: $body-border-breakpoint) {
left: $body-border-width--wide;
}
background: $background;
//background: var(--background);
box-shadow: 0 0.5rem 0.5rem -0.5rem rgba(0, 0, 0, 0.15);
}
&__inner {
overflow: hidden;
overflow-x: auto;
overflow-scrolling: touch;
&::-webkit-scrollbar {
height: 10px;
background-color: transparent;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
border: 2px solid var(--background);
height: 10px;
background-color: rgba(220, 220, 220, 0.75);
border-radius: 10px;
}
background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%,
radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)),
radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)) 0 100%;
//@supports (--css: variables) {
// background: linear-gradient(to right, rgba(var(--backgroundRGB), 1) 30%, rgba(var(--backgroundRGB), 0)),
// linear-gradient(to right, rgba(var(--backgroundRGB), 0), rgba(var(--backgroundRGB), 1) 70%) 0 100%,
// radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
// radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
//}
background-repeat: no-repeat;
background-size: 1em 100%, 1em 100%, 1em 100%, 1em 100%;
background-position: 0 0, 100%, 0 0, 100%;
background-attachment: local, local, scroll, scroll;
}
&__list {
position: relative;
display: flex;
margin: 0;
padding: $spacing-md 0;
white-space: nowrap;
}
&__item {
margin: 0 $spacing-2xs;
}
&__link {
padding: $spacing-sm;
border-radius: 0.2em;
font-weight: 500;
transition: all 200ms;
&:hover {
text-decoration: underline;
}
&.is-active {
background: $primary;
color: white;
text-decoration: none;
cursor: default;
}
}
&.is-waypoint-reached {
$background: $primary;
--background: #{$background};
--backgroundRGB: #{red($background)}, #{green($background)}, #{blue($background)};
.page-nav__stickyContainer {
position: fixed;
background: $background;
background: var(--background);
}
.page-nav__inner {
&::-webkit-scrollbar-thumb {
background-color: rgba(white, 0.35);
}
background: linear-gradient(to right, $background 30%, rgba($background, 0)),
linear-gradient(to right, rgba($background, 0), $background 70%) 0 100%,
radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)),
radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)) 0 100%;
//@supports (--css: variables) {
// background: linear-gradient(to right, rgba(var(--backgroundRGB), 1) 30%, rgba(var(--backgroundRGB), 0)),
// linear-gradient(to right, rgba(var(--backgroundRGB), 0), rgba(var(--backgroundRGB), 1) 70%) 0 100%,
// radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
// radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
//}
background-repeat: no-repeat;
background-size: 1em 100%, 1em 100%, 1em 100%, 1em 100%;
background-position: 0 0, 100%, 0 0, 100%;
background-attachment: local, local, scroll, scroll;
}
.page-nav__link {
color: white;
&.is-active {
background: white;
color: $text-color;
}
}
}
}