No notes defined.
<div class="wrap margin-top-xl margin-bottom-xl">
<div class="title title--has-tail js-waypoint">
<h1 class="h1">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-4xl js-waypoint-page-section" id="overview">
<header>
<div class="wrap">
<div class="title">
<h2>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-4xl js-waypoint-page-section" id="courses">
<header>
<div class="wrap">
<div class="title">
<h2>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-4xl js-waypoint-page-section" id="facilities">
<header>
<div class="wrap">
<div class="title">
<h2>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-4xl js-waypoint-page-section" id="work-experience-and-careers">
<header>
<div class="wrap">
<div class="title">
<h2>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-4xl js-waypoint-page-section" id="our-students">
<header>
<div class="wrap">
<div class="title">
<h2>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-4xl js-waypoint-page-section" id="our-staff">
<header>
<div class="wrap">
<div class="title">
<h2>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-4xl js-waypoint-page-section" id="our-graduates">
<header>
<div class="wrap">
<div class="title">
<h2>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" aria-label="Page footer">
<div class="wrap">
<div class="grid">
<div class="footer-site__map col-1/6@tablet">
<img src="../../images/uk-map-with-uos-campuses.svg" alt="" />
</div>
<div class="col-5/6@tablet">
<ul class="list--unstyled margin-top-xl">
<li><i class="icon icon--pin-red"></i> University of Staffordshire, College Road, University Quarter, Stoke-on-Trent, ST4 2DE</li>
<li><i class="icon icon--pin-red"></i> University of Staffordshire Centre for Health Innovation, Blackheath Lane, Stafford, ST18 0YB</li>
<li><i class="icon icon--pin-red"></i> University of Staffordshire London, Here East, Queen Elizabeth Olympic Park, East London, E20 3BS</li>
</ul>
<div class="grid">
<div class="col-1/4@tablet">
<p>+44 (0)1782 294000</p>
</div>
<div class="col-1/4@tablet">
<p><a href="">Contact us</a></p>
</div>
<div class="col-1/2@tablet">
<section aria-label="Connect with us">
<ul class="list--inline footer-site__social-list">
<li><a href=""><i class="icon"><img src="../../images/icons/icon-facebook-white.svg" alt="Facebook" /></i></a></li>
<li><a href=""><i class="icon"><img src="../../images/icons/icon-x-white.svg" alt="X" /></i></a></li>
<li><a href=""><i class="icon"><img src="../../images/icons/icon-instagram-white.svg" alt="Instagram" /></i></a></li>
<li><a href=""><i class="icon"><img src="../../images/icons/icon-youtube-white.svg" alt="YouTube" /></i></a></li>
<li><a href=""><i class="icon"><img src="../../images/icons/icon-tiktok-white.svg" alt="TikTok" /></i></a></li>
<li><a href=""><i class="icon"><img src="../../images/icons/icon-linkedin-white.svg" alt="LinkedIn" /></i></a></li>
</ul>
</section>
</div>
</div>
</div>
<div class="footer-site__links">
<div>
<h2 class="h6">Study</h2>
<ul class="list--links">
<li><a href="">Undergraduate</a></li>
<li><a href="">Postgraduate</a></li>
<li><a href="">Short courses and CPD</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>
<h2 class="h6">Information for</h2>
<ul class="list--links">
<li><a href="">Current students</a></li>
<li><a href="">Current staff</a></li>
<li><a href="">Alumni</a></li>
<li><a href="">Schools and colleges</a></li>
</ul>
</div>
<div>
<h2 class="h6">Also see</h2>
<ul class="list--links">
<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="">Transparency return</a></li>
</ul>
</div>
<div class="footer-site__logo">
<img class="footer-site__logo-img" src="../../images/logo-tef-silver.png" alt="TEF Silver" />
</div>
</div>
<p class="align-right">© Staffordshire University 2024</p>
</footer>
<div class="wrap margin-top-xl margin-bottom-xl">
<div class="title title--has-tail js-waypoint">
<h1 class="h1">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-4xl js-waypoint-page-section" id="overview">
<header>
<div class="wrap">
<div class="title">
<h2>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-4xl js-waypoint-page-section" id="courses">
<header>
<div class="wrap">
<div class="title">
<h2>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-4xl js-waypoint-page-section" id="facilities">
<header>
<div class="wrap">
<div class="title">
<h2>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-4xl js-waypoint-page-section" id="work-experience-and-careers">
<header>
<div class="wrap">
<div class="title">
<h2>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-4xl js-waypoint-page-section" id="our-students">
<header>
<div class="wrap">
<div class="title">
<h2>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-4xl js-waypoint-page-section" id="our-staff">
<header>
<div class="wrap">
<div class="title">
<h2>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-4xl js-waypoint-page-section" id="our-graduates">
<header>
<div class="wrap">
<div class="title">
<h2>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};
margin-bottom: $spacing-4xl;
$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: 0;
right: 0;
z-index: 9;
//transition: all 200ms;
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: $teal;
--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;
}
}
}
}