My latest project involves a fixed sidebar navigation with 3 divs designed to resemble dots, each corresponding to a different section of my webpage. These sections are set to occupy the full height of the viewport. Now, I'm facing the challenge of determining the scroll position on the page and identifying which section is currently in view.
Leveraging Vue.js for this task will certainly simplify the process once I crack the code.
To achieve this, it seems that I might need to utilize window.scrollY, OffsetTop, as well as the height property of each section to ascertain whether the current window.scrollY falls within the range of a section's OffsetTop (its starting position) and OffsetTop + height (its ending point). Is my approach correct so far?
This is where I stand at the moment:
*, *:after, *:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
list-style-type: none;
color: rgba(0, 0, 0, 0.8);
}
body {
background-color: #f1f1f1;
font-family: 'Roboto', 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
background-image: url("./assets/svg/topography.svg");
background-attachment: fixed;
}
section {
min-height: 100vh;
}
.navigation {
display: flex;
flex-direction: column;
position: fixed;
right: 5%;
top: 50%;
transform: translateY(-50%);
text-align: right;
}
.navigation div {
width: 20px;
height: 20px;
border-radius: 50%;
margin-bottom: 30px;
transition: all .1s linear;
border: 5px solid rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.navigation div:hover {
transform: scale(1.2)
}
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: green;
}<nav class='navigation'>
<div></div>
<div></div>
<div></div>
</nav>
<section class='one'></section>
<section class='two'></section>
<section class='three'></section>