No notes defined.
<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>
<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>
.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;
}
}
}
}