<nav id="vertical-dots" role="navigation" aria-label="Navigation">
<ul>
<li>
<a class="v-dot-link" href="##" aria-labelledby="v-dot-nav-section-1" data-section=#>
<span id="v-dot-nav-section-1">Undergraduate</span>
<i class="fas fa-arrow-up"></i>
</a>
</li>
<li>
<a class="v-dot-link" href="##" aria-labelledby="v-dot-nav-section-2" data-section=#>
<span id="v-dot-nav-section-2">Graduate</span>
</a>
</li>
<li>
<a class="v-dot-link" href="##" aria-labelledby="v-dot-nav-section-3" data-section=#>
<span id="v-dot-nav-section-3">International</span>
</a>
</li>
<li>
<a class="v-dot-link" href="##" aria-labelledby="v-dot-nav-section-4" data-section=#>
<span id="v-dot-nav-section-4">Distance and online</span>
</a>
</li>
<li>
<a class="v-dot-link" href="##" aria-labelledby="v-dot-nav-section-5" data-section=#>
<span id="v-dot-nav-section-5">Cost and aid</span>
</a>
</li>
</ul>
</nav>
html {
scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto; } }
#vertical-dots ul li span {
position: relative; }
#vertical-dots ul li span:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: var(--brand-primary);
border-width: 8px;
margin-top: -8px; }
#vertical-dots {
z-index: 2;
position: fixed;
right: -20px;
display: none;
height: 100vh;
top: 0;
padding-right: 20px;
align-items: center;
pointer-events: none; }
@media (min-width: 980px) {
#vertical-dots {
display: flex; } }
#vertical-dots ul {
pointer-events: all;
list-style: none;
margin: 0 10px 0 0;
background-color: var(--brand-secondary);
position: relative;
padding: 0px;
border-radius: 21px; }
#vertical-dots ul li {
list-style: none;
padding: 4px 0px; }
#vertical-dots ul li span {
padding: 0.25rem 1.2rem 0.15rem;
background-color: var(--brand-primary);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
line-height: 1.4;
text-transform: uppercase;
font-family: "Antonio", "Antonio-fallback", sans-serif;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
right: calc(100% - 12px);
position: absolute;
white-space: nowrap;
top: calc(50% - 16px);
transform: translateX(calc(100% + 20px));
transition: all 0.3s ease-in-out;
transition-property: transform; }
#vertical-dots ul li a {
position: relative;
color: var(--brand-secondary);
width: 32px;
height: 32px;
border-radius: 50%;
border: 12px solid var(--brand-secondary);
background-color: var(--brand-primary);
display: block;
transition: all 0.3s ease-in-out;
transition-property: background-color;
text-decoration: none; }
#vertical-dots ul li a:before {
content: '';
position: absolute;
border-radius: 20px;
width: 10px;
height: 10px;
left: -1px;
top: -1px;
background-color: transparent;
border: 1px solid var(--brand-primary);
transition: all 0.3s ease-in-out;
transform: scale(0.2);
transition-property: transform, background-color; }
#vertical-dots ul li a:hover span {
transform: translateX(-21px); }
#vertical-dots ul li a:focus span {
text-decoration: underline;
transform: translateX(-11px); }
#vertical-dots ul li a.current:before {
transform: scale(2.2); }
#vertical-dots ul li:first-child {
position: fixed;
position: fixed;
bottom: 14%;
right: -14px; }
#vertical-dots ul li:first-child span {
top: 0;
z-index: 4;
right: calc(100% - 40px); }
#vertical-dots ul li:first-child li {
padding: 0px; }
#vertical-dots ul li:first-child a {
background-color: transparent;
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
height: unset;
width: unset;
border: none;
padding-right: 3px; }
#vertical-dots ul li:first-child a:before {
content: unset; }
#vertical-dots ul li:first-child a i {
height: 32px;
width: 32px;
background-color: var(--brand-secondary);
z-index: 3;
text-align: center;
display: flex;
color: var(--brand-primary);
align-items: center;
justify-content: center;
border-radius: 21px;
margin-right: 20px;
padding-right: 1px; }
#vertical-dots ul li:first-child:hover span {
transform: translateX(-48px); }
.v-dots-scroll-spacer,
.vertical-dots--section {
position: relative; }
.v-dots-scroll-spacer .v-dots-scroll-target,
.v-dots-scroll-spacer .vertical-dots--target,
.vertical-dots--section .v-dots-scroll-target,
.vertical-dots--section .vertical-dots--target {
position: relative;
top: 0px; }
@media (min-width: 980px) {
.v-dots-scroll-spacer .v-dots-scroll-target,
.v-dots-scroll-spacer .vertical-dots--target,
.vertical-dots--section .v-dots-scroll-target,
.vertical-dots--section .vertical-dots--target {
top: -49px; } }
let mainNavLinks = document.querySelectorAll("nav ul li a.v-dot-link");
console.log(mainNavLinks);
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash).parentNode.nextElementSibling;
// console.log(section.offsetTop);
// console.log([section.offsetTop <= fromTop, section.offsetTop + section.offsetHeight > fromTop, [section.offsetTop, section.offsetHeight, fromTop]]);
if (
section.offsetTop -50 <= fromTop &&
section.offsetTop -50 + section.offsetHeight > fromTop
) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
@import '../../../assets/scss/variables';
@import '../../../assets/scss/utilities';
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
#vertical-dots ul li span {
position: relative;
}
#vertical-dots ul li span:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: $primary;
border-width: 8px;
margin-top: -8px;
}
#vertical-dots {
z-index: 2;
position: fixed;
right: -20px;
display: none;
height: 100vh;
top: 0;
padding-right: 20px;
align-items: center;
pointer-events: none;
@include breakpoint(md) {
display: flex;
}
ul {
pointer-events: all;
list-style: none;
margin: 0 10px 0 0;
background-color: $secondary;
position: relative;
padding: 0px;
border-radius: 21px;
li {
list-style: none;
padding: 4px 0px;
span {
padding: 0.25rem 1.2rem 0.15rem;
background-color: $primary;
box-decoration-break: clone;
line-height: 1.4;
text-transform: uppercase;
font-family: $font-family-caps;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
right: calc(100% - 12px);
position: absolute;
white-space: nowrap;
top: calc(50% - 16px);
transform: translateX(calc(100% + 20px));
transition: all 0.3s ease-in-out;
transition-property: transform;
}
a {
position: relative;
color: $secondary;
width: 32px;
height: 32px;
border-radius: 50%;
border: 12px solid $secondary;
background-color: $primary;
display: block;
transition: all 0.3s ease-in-out;
transition-property: background-color;
text-decoration: none;
&:before {
content: '';
position: absolute;
border-radius: 20px;
width: 10px;
height: 10px;
left: -1px;
top: -1px;
background-color: transparent;
border: 1px solid $primary;
transition: all 0.3s ease-in-out;
transform: scale(0.2);
transition-property: transform, background-color;
}
&:hover {
span {
transform: translateX(-21px);
}
}
&:focus {
span {
text-decoration: underline;
transform: translateX(-11px);
}
}
&.current {
&:before {
transform: scale(2.2);
}
}
}
&:first-child {
position: fixed;
position: fixed;
bottom: 14%;
right: -14px;
span {
top: 0;
z-index: 4;
right: calc(100% - 40px);
}
li {
padding: 0px;
}
a {
background-color: transparent;
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
height: unset;
width: unset;
border: none;
padding-right: 3px;
&:before {
content: unset;
}
i {
height: 32px;
width: 32px;
background-color: $secondary;
z-index: 3;
text-align: center;
display: flex;
color: $primary;
align-items: center;
justify-content: center;
border-radius: 21px;
margin-right: 20px;
padding-right: 1px;
}
}
&:hover span {
transform: translateX(-48px);
}
}
}
}
}
.v-dots-scroll-spacer,
.vertical-dots--section {
position: relative;
.v-dots-scroll-target,
.vertical-dots--target {
position: relative;
top: 0px;
@include breakpoint(md) {
top: -49px;
}
}
}